React native 如何在顶栏导航下添加可单击的右按钮？

我集成了React本地导航包。我想在顶栏右按钮上添加带有动态值的徽章。 包的Github链接：：

我想要这样的输出。您可以查看此屏幕截图：：

问题：：

若我在通知图标上添加一个计数值，那个么当我试图点击按钮时，并没有事件发生。点击这个按钮，我想打开我的通知屏幕

代码：

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>

自定义组件的代码：：

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>

this.openSystemAlerts（）}
样式={{位置：'absolute'，右：0，下：-13}
>
{（看不见的计数&&看不见的计数>0）&&
{看不见的计数}
}

环境

• React本机导航版本：2.12.0
• React本机版本：0.58
• 平台：仅限IOS（在10.0版上）

---

似乎，

位置：'absolute'

正在制造问题
或者
添加

zIndex:2

…在此，数字必须大于其父级中的任何其他

zIndex

，或者如果没有使用任何

zIndex

，则任何数字>0都可以
或

---

移除

位置：'absolute'

并尝试在没有它的情况下进行样式设置。
尝试此组件；对我来说很好

`
类TopBarCartCount扩展组件{
handleCartPress=（）=>{
如果（！this.props.isAuthenticated）{
NavigateUser（2，ComponentDS.myAccountStack，screenNames.signIn）
}否则{
NavigateUser（2，ComponentDS.myAccountStack，screenNames.myCart）
}
};
render（）{
返回(
{cartPlus}
{this.props.cart.length}
);
}
}
让mapStateToProps=（状态）=>{
返回{
购物车：state.auth.user.cart？state.auth.user.cart:[]，
isAuthenticated:state.auth.isAuthenticated
}
}
导出默认连接（MapStateTops）（TopBarCartCount）；
const styles=StyleSheet.create({
集装箱装卸工：{
弹性：1，
身高：40，
宽度：50，
为内容辩护：“中心”，
paddingTop:15，
paddingRight:5，
对齐项目：“中心”
},
容器：{
弹性：1，
身高：40，
宽度：50，
paddingLeft:5，
flexDirection:'行'，
alignItems:“灵活启动”
},
徽章：{
背景色：第二种情况。危险，
宽度：15，
身高：15，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingLeft:0，
paddingTop:1，
填充底部：2，
marginLeft:0，
边界半径：10
},
计数文本：{
尺寸：10，
paddingLeft:0，
颜色：Themesconstants.offWhite
}
});`

所以，正如《问题》中所说。。。如果不加count，那么它是否有效？在这两种情况下都不起作用。没有单击事件。