如何在topBar React Native Navigation下添加可点击的rightButtons？

Question

我已经集成了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>

环境

• React Native Navigation版本：2.12.0
• React Native版本：0.58
• 平台：仅限IOS（10.0版）

Answer 1

看来，position:'absolute'正在创造问题，

要么，

添加zIndex:2 ...这里，数字必须大于其父级中的任何其他zIndex，或者如果没有使用任何zIndex，则任何数字> 0都可以。

要么

删除position:'absolute'并尝试没有它的样式。

Answer 2

尝试这个组件;我工作得很好https://github.com/RajenderDandyal/smart-city-Mobile-App/blob/master/src/UI/TopBarCartCount/index.js

    `
    class TopBarCartCount extends Component {


      handleCartPress = () => {
        if (!this.props.isAuthenticated) {
        NavigateUser(2, componentIds.myAccountStack, screenNames.signIn)
        } else {
         NavigateUser(2, componentIds.myAccountStack, screenNames.myCart)
        }
       };

        render() {
          return (
             <View style={styles.containerWrapper}>
                <TouchableOpacity onPress={this.handleCartPress}>
                   <View style={styles.container}>
                      {cartPlus}
                   <View style={styles.badge}>
                      <Text style={styles.countText}>
                        {this.props.cart.length}
                      </Text>
                   </View>
                  </View>
               </TouchableOpacity>
              </View>

              );
            }
            }

           let mapStateToProps = (state) => {
             return {
             cart: state.auth.user.cart ? state.auth.user.cart : [],
             isAuthenticated: state.auth.isAuthenticated
             }
            }
            export default connect(mapStateToProps)(TopBarCartCount);

            const styles = StyleSheet.create({
               containerWrapper: {
                  flex: 1,
                  height: 40,
                  width: 50,
                  justifyContent: 'center',
                  paddingTop: 15,
                  paddingRight: 5,
                  alignItems: 'center'
                  },
                container: {
                     flex: 1,
                    height: 40,
                    width: 50,
                    paddingLeft: 5,
                    flexDirection: 'row',
                    alignItems: 'flex-start'
                     },
                  badge: {
                      backgroundColor: themeConstants.danger,
                      width: 15,
                      height: 15,
                      alignItems: 'center',
                      justifyContent: 'center',
                      paddingLeft: 0,
                      paddingTop: 1,
                      paddingBottom: 2,
                      marginLeft: 0,
                      borderRadius: 10
                      },
                    countText: {
                      fontSize: 10,
                      paddingLeft: 0,
                      color: themeConstants.offWhite
                     }
                    });`