React Native，NavigatorIOS，undefined不是对象（评估'this.props.navigator.push'） [英] React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')

问题描述

我正在尝试使用 NavigatorIOS 所以在我的 index.ios.js 中我得到了：

I'm trying to use NavigatorIOS so in my index.ios.js I got:

'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（），我收到错误：

The issue I have is that when I click on the TouchableHighlight triggering onPress(), I am getting an error:

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

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

So it seems that it can't find the navigator from props but the navigator should be passed by NavigatorIOS?

此外，似乎 Home 组件 this.props.navigator 根据图片：

Also it seems that the Home Component has this.props.navigator as per image:

任何提示？

我发现了几个链接（人们有完全相同的问题，但没有' t help）：

I found a couple of links (people having exactly the same problem but that didn't help):

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

undefined不是对象（评估'this.props.navigator。推'）

推荐答案

因为你正在使用ES6你需要绑定'this'。

Since you're using ES6 you need to bind 'this'.

例如： onPress = {this.onPress.bind（this）}

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

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.

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

这篇关于React Native，NavigatorIOS，undefined不是对象（评估'this.props.navigator.push'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！