React Native, NavigatorIOS, undefined 不是一个对象 (evaluating 'this.props.navigator.push')

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')

所以它似乎无法从 props 中找到 navigator 但导航器应该由 NavigatorIOS?

传递

此外，Home 组件似乎有 this.props.navigator，如图所示：

有什么提示吗？

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

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

Answer 1

由于您使用的是 ES6，因此您需要绑定 'this'。

例如：onPress={this.onPress.bind(this)}

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

onPress = () => {
  this.props.navigator.push({
    title: 'Routed!',
    component: Park
  });
};

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

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

React Native, NavigatorIOS, undefined 不是一个对象 (evaluating 'this.props.navigator.push')

React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')

javascript

navigator

ios

react-native