评估 ( this.props.navigator ) 未定义不是对象

Question

即使我正确地传递了导航器 porp，我还是收到了这个错误。

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 出现错误。

对我做错了什么有什么想法吗？

Answer 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) 的时代，class 方法自动绑定到 class。但是当我们开始 extend (ES6 classes) 时，我们需要将方法显式绑定到 class env.

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

Answer 2

以防万一，如果有人对为什么即使您在 class.

中具有该功能，它也不起作用的原因感兴趣。

如果声明如下所示，该函数未绑定到 class。

  theFunctionName() {
         // your code
  }

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

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

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

引用自

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

Answer 3

对于我的案例，我传入了导航器：

  onPress={this.fabPress(navigator)}

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

评估 ( this.props.navigator ) 未定义不是对象

evaluating ( this.props.navigator ) Undefined is not an object

navigator

reactjs

react-native

react-native-android

为什么我们必须这样做？