[英]React Native Navigation(StackNavigator): I get an error saying “ undefined is not an object (evaluating 'this.props.navigate') ”
I have just started learning react-native.... Doing a pet project now.... In the app there's a button on clicking it navigates to another screen. 我才刚刚开始学习本机操作。...现在正在做一个宠物项目。...在应用程序中,单击它时有一个按钮导航到另一个屏幕。 I get the following error saying " undefined is not an object (evaluating 'this.props.navigate') " The following are the files
我收到以下错误消息:“ undefined不是对象(正在评估'this.props.navigate')”以下是文件
index.js index.js
import React from "react";
import Navigator from "./config/routes";
export default () => <Navigator />;
The code in my config/routes.js 我的config / routes.js中的代码
import { StackNavigator } from "react-navigation";
import Home from "../screens/Home";
import List from "../screens/List";
export default StackNavigator({
Home: {
screen: Home,
navigationOptions: {
header: () => null
}
},
List: {
screen: List
}
});
and my component file Home.js which has the button which on click clicking navigates to another screen 和我的组件文件Home.js,该文件具有单击后单击导航到另一个屏幕的按钮
/*all import statements*/
class Home extends Component {
handlePressBaseCurrency() {
console.log("base currency button clicked");
this.props.navigation.navigate("List"); /* error from this line */
}
render() {
return (
<UserInput
currencyShort={TEMP_BASE_CURRENCY}
onPress={this.handlePressBaseCurrency}
defaultValue={TEMP_BASE_PRICE}
keyboardType="numeric"
onChangeText={this.handleTextChange}
/>
);
}
}
Please help!!! 请帮忙!!! Thanks in advance :D
提前致谢
this
is not bound correctly in handlePressBaseCurrency
. this
在handlePressBaseCurrency
未正确handlePressBaseCurrency
。 You can: 您可以:
Explicitly bind this
in your constructor: 在您的构造函数中明确绑定
this
:
constructor(props) { super(props); this.handlePressBaseCurrency = this.handlePressBaseCurrency.bind(this); }
From the React Docs on handling events : 从React Docs 处理事件 :
If calling bind annoys you, there are two ways you can get around this.
如果使绑定烦恼,可以通过两种方法解决此问题。 If you are using the experimental public class fields syntax , you can use class fields to correctly bind callbacks:
如果使用实验性的公共类字段语法 ,则可以使用类字段正确绑定回调:
handlePressBaseCurrency = () => { console.log("base currency button clicked"); this.props.navigation.navigate("List"); };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.