未定义不是对象(评估this.props.navigator.push')

时间:2017-02-17 08:17:52

标签: android react-native react-native-android

我正在为Android应用程序学习react-native编程。我正试图按下TouchableOpacity开始第二个屏幕。我正在使用navigator

我收到此错误undefined is not an object( evaluating this.props.navigator.push')

我检查了很多帖子React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push') undefined is not an object(evaluating this.props.navigator.push)但是对我不起作用。我不确定我在这里做错了什么,任何人都可以帮助我。提前谢谢。

  

index.android.js

/**
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import { AppRegistry, Text, View, TextInput, TouchableOpacity, ToolbarAndroid, StyleSheet,Container,ScrollView, Navigator } from 'react-native';


class App extends Component {
  renderScene (route, navigator) {
    return <route.component navigator={navigator} />
  }
  render() {
    return (
        <Navigator
          style={styles.container}
          renderScene={this.renderScene.bind(this)}
          initialRoute={{component: LoginComponent}}
        />
    );
  }
}

class LoginComponent extends Component {

  _navigate () {
      this.props.navigator.push({
          component: DashboardComponent
      })
  }

  render() {
     return (
          <View style={{flex: 1, flexDirection: 'column'}}>

            <ToolbarAndroid title='LOGIN' titleColor='white'
                onIconClicked={() => this.props.navigator.pop()}
                style={styles.toolbar}/>

            <View style={{padding:10}}>

              <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
                  placeholder="Email address" underlineColorAndroid='transparent'/>

              <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
                  placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent'/>

              <TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={this._navigate.bind(this)}>
                  <Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text>
              </TouchableOpacity>
            </View>
       </View>
     );
  }
}

const styles = StyleSheet.create({
    toolbar: {
     backgroundColor: '#2E8B57',
     height: 40,
     fontFamily: 'noto_serif_regular',
    },
});

AppRegistry.registerComponent('ExampleOne', () => LoginComponent);
  

second.android.js

import React, { Component } from 'react';

class DashboardComponent extends Component {
  render() {
     return (
       <Text>Hello!</Text>
     );
   }
 }

1 个答案:

答案 0 :(得分:3)

您在AppRegistry.registerComponent注册了错误的组件,它应该是App而不是LoginComponent

首先需要渲染导航器组件,然后它将渲染并将导航器支撑向下传递到场​​景。