Javascript React Native, NavigatorIOS, undefined 不是对象（评估'this.props.navigator.push'）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31304017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')
提问by manosim
I'm trying to use NavigatorIOSso in my index.ios.jsI got:
我正在尝试使用NavigatorIOSso 在我index.ios.js得到：
'use strict';
var React = require('react-native');
var Home = require('./App/Components/Home');
var {
AppRegistry,
StyleSheet,
NavigatorIOS
} = React;
var styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#111111'
}
});
class ExampleApp extends React.Component{
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'example',
component: Home
}} />
);
}
};
AppRegistry.registerComponent('exampleapp', () => ExampleApp);
module.exports = ExampleApp;
And then in the Home.js:
然后在Home.js：
'use strict';
var React = require('react-native');
var Park = require('./Park');
var {
View,
StyleSheet,
Text,
TouchableHighlight
} = React;
var styles = StyleSheet.create({
...
});
class Home extends React.Component{
onPress() {
this.props.navigator.push({
title: 'Routed!',
component: Park
});
}
render() {
return (
<View style={styles.mainContainer}>
<Text> Testing React Native </Text>
<TouchableHighlight onPress={this.onPress} style={styles.button}>
<Text>Welcome to the NavigatorIOS . Press here!</Text>
</TouchableHighlight>
</View>
);
}
};
module.exports = Home;
The issue I have is that when I click on the TouchableHighlighttriggering onPress(), I am getting an error:
我遇到的问题是，当我单击TouchableHighlight触发onPress()时，出现错误：
"Error: undefined is not an object (evaluating 'this.props.navigator')
So it seems that it can't find the navigatorfrom props but the navigator should be passed by NavigatorIOS?
所以它似乎找不到navigatorfrom 道具，但导航器应该通过NavigatorIOS？
Also it seems that the HomeComponent has this.props.navigatoras per image:
此外，该Home组件似乎具有this.props.navigator每个图像：
Any hints?
任何提示？
I found a couple of links (people having exactly the same problem but that didn't help):
我找到了几个链接（人们遇到了完全相同的问题，但没有帮助）：
回答by Dave Sibiski
Since you're using ES6 you need to bind 'this'.
由于您使用的是 ES6，因此您需要绑定“this”。
For example: onPress={this.onPress.bind(this)}
例如： onPress={this.onPress.bind(this)}
Edit: Yet another way that I've been using more recently is to use an arrow function on the function itself, since they will automatically bind the outside this.
编辑：我最近使用的另一种方法是在函数本身上使用箭头函数，因为它们会自动绑定外部this.
onPress = () => {
this.props.navigator.push({
title: 'Routed!',
component: Park
});
};
回答by Anil
You can bind the function to this in the constructor.
您可以在constructor.
constructor(props) {
super(props);
this.onPress = this.onPress.bind(this);
}
Then use it when rendering without binding.
然后在没有绑定的情况下渲染时使用它。
render() {
return (
<TouchableHighlight onPress={this.onPress} style={styles.button}>
<Text>Welcome to the NavigatorIOS. Press here!</Text>
</TouchableHighlight>
);
}
This has the advantage of being able to be used multiple times and also clean's up your render method.
这样做的好处是可以多次使用，还可以清理您的渲染方法。
