React Native踩坑之路 — static navaigationOptions中使用this

我的场景：在导航栏右侧自定义按钮进行一些跳转或者什么操作，需要有点击事件和state动态改变。

我的第一反应，很简单嘛，直接 onPress={this.go()} 和 this.state.num 就可以了啊。

但是，事情并没有那么简单的。

在我的static navaigationOptions 中根本无法直接获取到当前页面的this，像上面那样的使用会报错 undefined。

既然直接不能使用，那只能是通过参数把要用到的东西传进去啦！想函数go(),我们将函数的引用传递给navaigationOptions，在navaigationOptions中进行调用，是不是就可以找到了，同样，state的值也可以传过去。

具体使用如下：

1. 在componentDidMount中设置参数，以便传给navaigationOptions。在componentDidMount中是为了保证函数和state已被初始化

componentDidMount() {  
    this.props.navigation.setParams({navigatePress:this.go,selectNum:this.state.num});
}

2. 在navaigationOptions —> headerRight中使用params获取点击事件，在需要用到state的地方获取参数selectNum

static navigationOptions = ({navigation}) => {
    return {
        title: '选择联系人',
        headerRight:(
            <TouchableOpacity onPress={() => navigation.state.params.navigatePress()}>
                <View><Text>确定({navigation.state.params?navigation.state.params.selectNum:0})</Text></View>
            </TouchableOpacity>
        ),
    }
};

这样就可以正常获取了。

【补充：调用state时“navigation.state.params?navigation.state.params.selectNum:0”这样写，是因为在我使用的时候会传两次参数，第一次传过去的params是undefined，也没找到具体原因，所以就用三元运算符判断了一下，不作为参考】

还有，由于state值在setState之后会变化，但是componentDidMount只会在组件挂载之后调用一次，state更新引发都render并不会影响componentDidMount，所以，我在state更新都地方重新设置了state参数，像下面这样：

getContactsItem = (data) => {
    this.setState({
        num:data.selectNum,
    });
    //更新state
    this.props.navigation.setParams({selectNum:data.selectNum});
}

这样，我想要的效果就有了。如果有任何不对或者不合适的地方，欢迎指正。如果有更好的解决方法，也欢迎讨论！