evaluate(this.props.navigator)Undefined不是对象

时间:2016-11-26 03:29:50

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

即使我正确地传入导航器porp,我也会收到此错误。

MySetup就是这样的:主导航器页面 - > FirstView(onBtnPress) - >细节

当我在firstView页面中调用this.navigator.push时,我收到错误。

主档案

#include <string>
#include <deque>
#include <iostream>

class Action{
    public:
    std::string name;

    Action(std::string name){
        this->name = name;
    }
};

class Ability : public Action{
public:
    int bar;
    Ability(std::string name) : Action(name){}
};

int main(){
    std::deque<Action*> foo;

    Ability test("asdf");
    test.bar = 122;

    foo.push_back(&test);
    std::cout << foo.at(0)->bar << std::endl;
    return 0;
}

第一部分:

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

fabPress发生错误。

关于我做错的任何想法?

3 个答案:

答案 0 :(得分:8)

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作为事件的回调函数传递,它在类外的另一个env中执行;因此this将来自执行范围env。但是我们需要this我们班级才能访问this.props.navigator:)

答案 1 :(得分:4)

如果有人对即使你在课堂上有这个功能也不起作用的原因感兴趣的话。

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

  theFunctionName() {
         // your code
  }

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

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

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

摘自here

请确保您拥有必要的预设。由于箭头功能是高度实验性的功能(截至此期间)

答案 2 :(得分:0)

对于我的情况,我通过了导航器:

  onPress={this.fabPress(navigator)}

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