反應本機。 未定義不是對象（評估“ this.props.navigator.push”）

Question

我正在測試代碼，但出現錯誤。 我需要按下一個按鈕，然后轉到下一頁。

首先，我創建了Safay.js並編寫了代碼來設置此頁面中的初始路由。 然后，我創建了buttonsubmit.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',
    },
});

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。

干杯:)