反應原生。未定義不是對象（評估'this.props.navigator.push'）

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。

乾杯:)