Как добавить кликабельные правые кнопки под TopBar React Native Navigation?

Question

Я интегрировал навигационный пакет React Native.Я хочу добавить значок с динамическим значением на моей верхней панели справа.Ссылка на пакет Github :: https://github.com/wix/react-native-navigation

Я хочу вывод, подобный этому.Вы можете проверить этот скриншот ::

Issue ::

Если я добавляю значение счетчикана значке уведомлений не происходит никаких событий, когда я пытаюсь нажать на кнопку.При нажатии этой кнопки я хочу открыть свой экран уведомлений.

Код:

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 Версия навигации: 2.12.0
• React Native версия: 0.58
• Платформа (ы): только IOS (в версии 10.0)

Answer 1

попробуйте этот компонент;работал нормально для меня 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
                     }
                    });`

Answer 2

Кажется, что position:'absolute' создает проблему,

Либо,

add zIndex:2 ... здесь число должно быть больше, чем любое другое zIndex в его родительском элементе.или если zIndex не используется, то любое число> 0 подойдет.

или

удалите position:'absolute' и попробуйте стайлинг без него.