反应原生。 undefined 不是对象（评估“this.props.navigator.push”）答案

【问题标题】：React native. undefined is not object (evaluating 'this.props.navigator.push')反应原生。 undefined 不是对象（评估“this.props.navigator.push”）
【发布时间】：2017-02-19 13:28:36
【问题描述】：

我正在测试我的代码并出现错误。我需要按一个按钮并转到下一页。

首先，我创建了 Safay.js 并编写了代码来设置此页面中的初始路由。然后我创建了 buttonsubmit.js，这样当我按下按钮时，它将转到下一页 route.js。但是，在测试时出现错误。我刚刚重新检查了我的代码，可能是我打错了，或者我不知道。

这是我的错误：

got error: undefined is not an object (evaluating 'this.props.navigator.push')

ButtonSubmit.js 文件中的错误：22

这是我的代码：

Safay.js

    import index from './index.js';
import React, { Component, PropTypes } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
   AppRegistry, StyleSheet, Text, View} from 'react-native';
import Route from './Route.js';
import Signup from './Signup.js';
import ButtonSubmit from './ButtonSubmit.js';

export default class Safay extends Component {

  renderScene(route, navigator){
    if(route.name == 'Safay'){
      return <Safay navigator={navigator}/>
    }
    if(route.name == 'Route'){
      return <Route navigator={navigator}/>
    }
  }

    render() {
        return (
      <View style={styles.container}>
        {<navigator
          initialRoute={{name: 'Safay'}}
          renderScene={this.renderScene.bind(this)}
        />}
      </View>
        );
    }
}

ButtonSubmit.js

import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    Animated,
    Easing,
    Image,
    Alert,
    View,
} from 'react-native';


const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;

export default class ButtonSubmit extends Component {

    navigate(routeName){
        this.props.navigator.push({
            name: routeName
        })
    }

    render() {
        return (
            <View style={styles.container}>
                    <TouchableOpacity onPress={this.navigate.bind(this, 'Route')} style={styles.button}>
                      <Text style={styles.text}>LOGIN</Text>
                    </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        top: -20,
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ff8011',
        height: MARGIN,
        borderRadius: 20,
        zIndex: 100,
    width: DEVICE_WIDTH - 40,
    },
    circle: {
        height: MARGIN,
        width: MARGIN,
        marginTop: -MARGIN,
        borderWidth: 1,
        borderColor: '#ff8011',
        borderRadius: 100,
        alignSelf: 'center',
        zIndex: 99,
        backgroundColor: '#ff8011',
    },
    text: {
        color: 'white',
    fontWeight: '700',
        fontSize: 21,
        backgroundColor: 'transparent',
    },
});

Route.js

import React, { Component } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
   AppRegistry, StyleSheet, Text, View} from 'react-native';

export default class Route extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

 const styles = StyleSheet.create({
   container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#05121F',
  },
 });

感谢您的支持。

【问题讨论】：

标签： javascript ios react-native

【解决方案1】：

您在按钮类中出错了，因为您没有将导航器的实例传递给按钮类并且您正在使用导航器。

如果我是你，我会从按钮中删除 onpress 一段时间，然后我会在 Safay 类中使用按钮。像这样：

<View style={styles.container}>
        <ButtonSubmit navigator={navigator} /> 
        <navigator
          initialRoute={{name: 'Safay'}}
          renderScene={this.renderScene.bind(this)}
        />
      </View>

在完成上述所有过程后，我将再次包含 onPress。

干杯:)

【讨论】：