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

た入场券 2022-03-22 13:40 103阅读 0赞

**背景：**  
最近在开发项目时需要在导航栏中点击菜单按钮之后弹出来相应的动态的举报确认。但是举报确认的`ActionSheet`是在外部调用的。  
**上图：**  
1: 点击导航栏中的菜单选项（右上角）  
![在这里插入图片描述][20190129173604362.png]  
2:弹出来相应的举报选项  
![在这里插入图片描述][20190129173650761.png]  
接下来就走一遍这个流程。并将逻辑理清楚。  
在项目中是使用`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')} />
              </TouchableOpacity>
            )
          }
        }
      )

2: 下面的代码是相应的外部定义函数`actionSheet`

actionSheetTest = () => {
        ActionSheet.show(
          {
            options: ['举报', '取消'],
            cancelButtonIndex: 1,
            destructiveButtonIndex: 0
          },
          buttonIndex => {
            console.log(buttonIndex)
            if (buttonIndex === 0) {
              console.log('动态：' + this.props.navigation.getParam('postId', '') + '被举报')
            }
          }
        )
      }

简单的解释一下：  
关于`ActionSheet`的使用可以去**NativeBase**的官网去看一下简单的`demo`，比较详细。  
需要注意的一点：`<Root>`组件  
![在这里插入图片描述][20190129175307614.png]  
为了保证ActionSheet的正常使用，**必须引入Root组件，并将你的最顶层的组件包裹在Root组件中。**  
`ActionSheet.show（）`内部有一个箭头函数传入`buttonIndex`，当点击的是举报时。就会输出相应的动态ID被举报。  
可是想的简单，在`navigationOptions`中他是无法调用这个函数的

onPress={this.actionSheetTest}>

`onPress`回调是不能成功执行的。  
**分析：**  
如果看过上一篇博客，你就会发现传入`navigationOptions`中的是`props`，因此你用`onPress={this.actionSheetTest}>`是找不到这个函数的。因此，我们需要在传入的`props`上做点文章。  
上代码：

componentDidMount () {
        this.props.navigation.setParams({ openActionSheet: this.actionSheetTest })
      }

在组件渲染之后为`navigation`设置`params`，自定义一个`function`，在这里调用外部函数，`actionSheetTest`将这个函数赋给参数：`openActionSheet`。这样我们在项目中`console`一下`navigation`以及他对应的函数看看有什么变化。

<TouchableOpacity onPress={() => console.log(props.navigation)}>
                <Image style={Styles.profileMarginRight20} source={require('../../../../img/threePoints.png')} />
          </TouchableOpacity>

**结果为：**  
![在这里插入图片描述][20190129181142517.png]  
![在这里插入图片描述][20190129182722707.png]  
![在这里插入图片描述][20190129182632426.png]  
此时我们通过对`navigation`中的`params`的操作就可以在`navigationOptions`中获取到相应的函数了。此时调用已经毫无阻拦了。

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

**总结：**  
**由navigationOptions中只能接收props，因此考虑在props中的navigation中搞点事情。所以在生命周期函数中将自定义函数setParams一下赋值给navigation中的自定义参数。这样在navigationOptions中就可以调用相应的函数了。**  
灵感借鉴：  
[https://stackoverflow.com/questions/53263368/react-native-cannot-read-property-root-of-undefined-when-using-nativebase-d][https_stackoverflow.com_questions_53263368_react-native-cannot-read-property-root-of-undefined-when-using-nativebase-d]  
谢谢！！！

[20190129173604362.png]: /images/20220322/00afc43fc2c042ae83b05db2c9a6328f.png
[20190129173650761.png]: /images/20220322/2149b29fd8ee4f0e90f91c2f60e60566.png
[20190129175307614.png]: /images/20220322/5382566a897b4220b09c2c674c559c2b.png
[20190129181142517.png]: /images/20220322/2a1b2443a9b44d9c8d6ff4d602794f1c.png
[20190129182722707.png]: /images/20220322/a8e2bbee55114cdb9d9981200d567332.png
[20190129182632426.png]: /images/20220322/27beabebda144193975a57d15f1d0196.png
[https_stackoverflow.com_questions_53263368_react-native-cannot-read-property-root-of-undefined-when-using-nativebase-d]: https://stackoverflow.com/questions/53263368/react-native-cannot-read-property-root-of-undefined-when-using-nativebase-d