反应原生。undefined 不是对象(评估 'this.props.navigator.push')

Question

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

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

这是我的错误：

获取错误：Undefined不是对象（评估'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',
    },
});

rout.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',
  },
 });

谢谢您的支持。

Answer 1

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

如果我是您，我会从按钮上删除OnPress一段时间，然后我将在班级萨菲（Safay）中使用按钮。这样：

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

在上述所有过程之后，我将再次包括OnPress。

欢呼:)