React導航onPress自帶函數

Question

我已經實現了React導航示例，如教程https://reactnavigation.org/docs/intro/，它工作正常。

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

而不是直接在onPress調用導航，我想調用它在一個單獨的函數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> 
    ); 
    } 
} 

以下錯誤：不確定是不是（評估this.props.navigation）

Answer 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> 
    ); 
} 

或定義_btnToChat方法的內部constructor的結合：

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> 
    ); 
}