反应原生。未定义不是对象（评估'this.props.navigator.push'）

我正在测试我的代码，并得到一个错误。我需要按下一个按钮并转到下一页。反应原生。未定义不是对象（评估'this.props.navigator.push'）

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

谢谢您的支持。

来源

2017-02-19 Preecha Wanaraksakul

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

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

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

经过上述所有过程后，我将再次包括onPress。

干杯:)

来源

2017-02-19 13:51:28 Codesingh

反应原生。未定义不是对象（评估'this.props.navigator.push'）

回答

相关问题