React Native：无法读取未定义的属性 'push' - 具有 NavigatorIOS 和 ES6 绑定（this）

Question

我正在开发一个 React 本机应用程序，我试图在通过 Facebook 成功登录后将用户路由到下一个视图。

问题是我继续收到错误消息 "Cannot read property 'push' of undefined." 我已经检查了论坛上的所有相关答案，并且确保在我的函数调用中包含 NavigatorIOS 和 bind(this) - 所以就是这些问题。

由于我是新手开发者，因此我很乐意帮助您确定问题所在。

这里是错误：

Error: Cannot read property 'push' of undefined
 stack: 
  <unknown>                                              index.ios.bundle:1498
  MessageQueue.__invokeCallback                          index.ios.bundle:7235
  <unknown>                                              index.ios.bundle:7151
  guard                                                  index.ios.bundle:7104
  <unknown>                                              index.ios.bundle:7151
  <unknown>                                              index.ios.bundle:7148
  ReactDefaultBatchingStrategyTransaction.Mixin.perform  index.ios.bundle:6552
  Object.ReactDefaultBatchingStrategy.batchedUpdates     index.ios.bundle:15885
  Object.batchedUpdates                                  index.ios.bundle:5084
 URL: undefined
 line: undefined
 message: Cannot read property 'push' of undefined

==============================

这是我的代码

'use strict';

var React = require('react-native');
var Main = require('./App/Components/Main');
var Icon = require('./node_modules/react-native-vector-icons/FontAwesome');
var FacebookLoginManager = require('NativeModules').FacebookLoginManager;
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
NavigatorIOS,
Navigator,
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
 instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    marginTop: 10
 },
 icon: {
    fontSize: 20,
    color: 'white',
    paddingVertical: 5,
    paddingHorizontal: 8,
    borderRadius: 4,
    backgroundColor: '#3b5998',
 },
text: {
    marginLeft: 10,
    color: 'white',
    fontWeight: '600',
},
});

class nomsyapp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 'Find the Foods that Fit Your Lifestyle',
      loggedIn: false,
    };
  }

  login() {
    FacebookLoginManager.newSession((error, info) => {
      if (error) {
        this.setState({result: error});
      } else {
        this.setState({result: info});
        this.setState({loggedIn: true});
        this.props.navigator.push({
          component: Main,
          title: 'Choose Your Lifestyle',
        });
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.login.bind(this)}>
         <Icon name="facebook" style={styles.icon}>
            <Text style={styles.text}>Login with Facebook</Text>
          </Icon>
        </TouchableHighlight>
        <Text style={styles.instructions}>
          {this.state.result}
        </Text>
      </View>
    );
  }
};


AppRegistry.registerComponent('nomsyapp', () => nomsyapp);

==============================

Answer 1

这是您的初始路线所需的格式：

render: function() {
  return (
    <NavigatorIOS
      initialRoute={{
        component: nomsyapp,
        title: 'Nomsyapp',
        passProps: { /*whatever props you want */ },
      }}
    />
  );
}

此示例基于 Facebook docs。

因此，您应该将所有当前代码移动到另一个组件中，并创建一个具有上面显示的渲染功能的新组件。然后 nomsyapp 组件将具有 navigator 属性并且您将能够导航路线。

React Native：无法读取未定义的属性 'push' - 具有 NavigatorIOS 和 ES6 绑定（this）

React Native: Cannot read property 'push' of undefined - Have NavigatorIOS and ES6 bind(this)

javascript

iphone

facebook

ios

react-native

这里是错误：

这是我的代码

React Native：无法读取未定义的 属性 'push' - 具有 NavigatorIOS 和 ES6 绑定（this）

React Native: Cannot read property 'push' of undefined - Have NavigatorIOS and ES6 bind(this)

javascript

iphone

facebook

ios

react-native

这里是错误：

这是我的代码

React Native：无法读取未定义的属性 'push' - 具有 NavigatorIOS 和 ES6 绑定（this）