未定义不是对象（评估 this.props.navigator.push'）

Question

我正在学习react-native android 应用程序编程。我试图在按下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>
     );
   }
 }

Answer 1

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

导航器组件需要先渲染，然后它会渲染并将导航器道具传递给它的场景。