评估（this.props.navigator）未定义不是一个对象答案

【问题标题】：evaluating ( this.props.navigator ) Undefined is not an object评估（this.props.navigator）未定义不是一个对象
【发布时间】：2017-04-10 10:10:26
【问题描述】：

即使我正确地传递了导航器端口，我也会收到此错误。

MySetup 是这样的：Main navigator Page -> FirstView (onBtnPress) -> Details

当我在 firstView 页面中调用 this.navigator.push 时出现错误。

主文件：

import React, { Component, PropTypes } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';

class app extends Component{

    constructor(props) {
        super(props); 
    }


   navigatorRenderScene(route, navigator) {
        return <route.component navigator={navigator}/>

  }
     configureScene() {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }


    render() {

      return (
     <Navigator
        style={styles.container}
        initialRoute= {{component: MainMapView}}
        renderScene={this.navigatorRenderScene}/>
      );
    }
}


const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'column', padding: 20 }
});

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

第一部分：

    <ActionButton buttonColor="rgba(30,144,255,1)" style={styles.fabIcon}
                  onPress={this.fabPress}>
    </ActionButton>


  fabPress() {
  this.props.navigator.push({
      component : DetaislView
    });
  }

fabPress 上出现错误。

关于我做错了什么有什么想法吗？

【问题讨论】：

标签： reactjs react-native navigator react-native-android

【解决方案1】：

在你的 FirstComponent.js 中试试这个：

class FirstComponent extends Component {

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

    // ... rest of the code remains the same

为什么我们必须这样做？

当我们使用React.createClass (ES5) 时，类方法会自动绑定到类。但是当我们开始extend（ES6 类）时，我们需要将方法显式绑定到类 env。

fabPress 作为事件的回调函数被传递，它在类外的另一个环境中执行；因此this 将来自执行环境的范围。但是我们需要我们班级的this 才能访问this.props.navigator :)

【讨论】：

没有变化。山姆错误。顺便说一句..这段代码是做什么的？

【解决方案2】：

以防万一有人对为什么即使您在类中具有该功能也不起作用的原因感兴趣。

如果声明如下所示，则函数不会绑定到类。

  theFunctionName() {
         // your code
  }

如果使用以下语法声明该函数，则该函数将绑定到该类。

  theFunctionName = () => {
         // your code
  }

因此您可以省略bind(this) 代码。

参考来自here

请确保您拥有必要的预设。由于箭头函数是高度实验性的功能（截至目前）

【讨论】：

警告： 将类方法定义为 Arrow Functions 是一项高度实验性的功能。确保你有必要的预设。

【解决方案3】：

对于我的情况，我通过了导航器：

  onPress={this.fabPress(navigator)}

  fabPress(navigator) {
    navigator.push({component: DetaislView});
  }

【讨论】：

什么是组件：DetailView？