我已经集成了 React Native 导航包。我想在我的 topBar rightButton 上添加带有动态值的徽章。
包的 Github 链接:: https://github.com/wix/react-native-navigation
我想要这样的输出。您可以查看此屏幕截图::
问题::
如果我在通知图标上添加计数值,那么当我尝试单击按钮时不会发生任何事件。单击此按钮后,我想打开通知屏幕。
代码:
static options({ menuIcon }) {
return {
topBar: {
title: {
fontFamily: font,
fontSize: fontSize.heading,
color: colors.white,
alignment: 'center',
text: strings.dashboard
},
alignment: 'center',
elevation: 0,
noBorder: true,
background: {
color: colors.dark
},
leftButtons: [
{
id: 'openSideMenu',
icon: menuIcon ? menuIcon : APIURLServiceSingleton.getInstance()._menuIcon
}
],
rightButtons: [
{
id: 'notificationButton',
component: {
name: 'component.notificationButton'
}
}
]
}
}
}
我的自定义组件的代码::
<TouchableOpacity
onPress={() => this.openSystemAlerts()}
style={{ position: 'absolute', right: 0, bottom: -13 }}
>
<View style={styles.button}>
<View style={[posRelative]}>
<Icon
name="notifications-none"
size={27}
color={colors.white}
/>
{(unseen_count && unseen_count > 0) &&
<Text style={styles.badge}>{unseen_count}</Text>
}
</View>
</View>
</TouchableOpacity>
环境
最佳答案
看来,position:'absolute'
正在制造问题,
任何一个 ,
添加 zIndex:2
...这里,数字必须大于任何其他 zIndex
在其父级中,或者如果没有任何 zIndex
使用然后任何数字> 0 都可以。
或者
删除 position:'absolute'
并尝试在没有它的情况下进行造型。
关于react-native - 如何在topBar React Native Navigation下添加可点击的rightButtons?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54919086/