React Native，NavigatorIOS，undefined不是一个对象（评估＆＃39; this.props.navigator.push＆＃39;）

Question

我尝试使用NavigatorIOS所以在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;

然后在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;

我遇到的问题是，当我点击TouchableHighlight触发onPress()时，我收到错误消息：

"Error: undefined is not an object (evaluating 'this.props.navigator')

所以它似乎无法从道具中找到navigator，但导航器应该由NavigatorIOS传递？

根据图片，Home组件似乎还有this.props.navigator：

任何提示？

我找到了几个链接（人们有完全相同的问题，但没有帮助）：

• https://github.com/facebook/react-native/issues/416

• undefined is not an object (evaluating 'this.props.navigator.push')

Answer 1

由于你使用的是ES6，你需要绑定'this'。

例如：tib:parse-dateTime('yyyy-MM-dd HH:mm:ss', translate(<<insertYourString>>, 'TZ', ' '))

编辑：我最近使用的另一种方法是在函数本身上使用箭头函数，因为它们会自动绑定外部onPress={this.onPress.bind(this)}。

this

Answer 2

您可以在constructor。

中将函数绑定到此

constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
}

然后在没有绑定的情况下渲染时使用它。

render() {
    return (
        <TouchableHighlight onPress={this.onPress} style={styles.button}>
            <Text>Welcome to the NavigatorIOS. Press here!</Text>
        </TouchableHighlight>
    );
}

这样做的好处是可以多次使用，也可以清理渲染方法。