React-Native使用React-Navigation在顶部导航栏调用外部定义函数

最新推荐文章于 2025-06-10 12:01:49 发布

F-ZERO-F

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： React-Navigation 文章标签： react-native中调用ActionSheet 在react-navigation的导航栏中调用外部函数 _root of undefined

本文链接：https://blog.youkuaiyun.com/sun_DongLiang/article/details/86679453

背景：
最近在开发项目时需要在导航栏中点击菜单按钮之后弹出来相应的动态的举报确认。但是举报确认的ActionSheet是在外部调用的。
上图：
1: 点击导航栏中的菜单选项（右上角）
在这里插入图片描述
2:弹出来相应的举报选项

接下来就走一遍这个流程。并将逻辑理清楚。
在项目中是使用react-navigation进行导航的。因此这个事件的触发必须要放在navigationOptions中进行定义。在前一篇博客里，描述了如何在导航栏中进行跳转。在这一部分还是使用到了相应的知识点。
看一下代码:
1: 这是定义的navigationOptions，点击时触发外部定义的actionSheetTest函数。关于这一部分的知识点可以看上一篇的博客，有相应的解释

static navigationOptions = (
    (props) => {
      return {
        headerBackTitle: null,
        headerRight: (
          <TouchableOpacity onPress={this.actionSheetTest}>
            <Image style={Styles.profileMarginRight20} source={require('../../../../img/threePoints.png')} /