Question

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

首先，我创建了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',
  },
 });

感谢您的支持。

Answer 1

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

如果我是你，我会从按钮上移除onpress一段时间然后我会在课堂上使用按钮Safay。像这样：

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

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

干杯:)

反应原生。 undefined不是对象（评估＆＃39; this.props.navigator.push＆＃39;）

1 个答案: