react-native - 如何在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 原生导航版本:2.12.0

react native 版本:0.58

平台:仅限 IOS(版本 10.0)

Answer 1

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

任何一个 ，

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

或者

删除 position:'absolute'并尝试在没有它的情况下进行造型。