在自己的功能中反应导航 onPress

【问题标题】：React Navigation onPress in own function在自己的功能中反应导航 onPress
【发布时间】：2017-11-16 05:02:55
【问题描述】：

我已经按照教程 https://reactnavigation.org/docs/intro/ 实现了 React Navigation 示例，并且效果很好。

<Button
  onPress={() => navigate('Chat')}
  title="Chat with Lucy"
/>

我想在单独的函数 btnToChat 中调用它，而不是直接在 onPress 中调用导航。我尝试用 this.props.navigation.navigate 调用它，但它不起作用。你有什么建议吗？谢谢！

btnToChat(){
  console.log("test");
  this.props.navigation.navigate('Chat');    
}
render() {
  const { navigate } = this.props.navigation;
return (
  <View>
    <Button
      onPress={this._btnToChat}
    />
  </View>
    );
  }
}

出现如下错误：undefined is not an object (evalating this.props.navigation)

【问题讨论】：

标签： reactjs react-native native react-native-navigation

【解决方案1】：

一切正常，您只需绑定_btnToChat 方法以访问（正确的上下文）this 关键字。

像这样：

btnToChat = () => {                      //here use arrow  function
    console.log("test");
    this.props.navigation.navigate('Chat');    
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Button
                onPress={this._btnToChat}
            />  
        </View>
    );
}

或者在constructor里面定义_btnToChat方法的绑定：

constructor(){
   super();
   this._btnToChat = this._btnToChat.bind(this);
}

btnToChat (){           
    console.log("test");
    this.props.navigation.navigate('Chat');    
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Button
                onPress={this._btnToChat}
            />  
        </View>
    );
}

【讨论】：