Reactjs 按自己的功能进行反应导航

我已经实现了教程中的React导航示例，效果很好

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

导航（'Chat'）}
title=“与露西聊天”
/>

我不想在onPress中调用navigate direct，而是想在一个单独的函数btnToChat中调用它。我试着用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>
    );
  }
}

btnToChat（）{
控制台日志（“测试”）；
this.props.navigation.navigate（'Chat'）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
);
}
}

---

出现以下错误：undefined不是对象（评估this.props.navigation）

一切正常，您只需绑定

\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(){
   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>
    );
}