我已经实现了教程中的 React Navigation 示例 https://reactnavigation.org/docs/intro/而且效果很好。
<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 (evaluating this.props.navigation)
最佳答案
一切正常,您只需绑定(bind) _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
方法的绑定(bind):
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>
);
}
关于reactjs - 在自己的函数中响应导航 onPress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44538072/