Undefined 不是对象（评估 this.props.navigator.push'）

Question

我正在学习 react-native 为 android 应用程序编程。我试图在按下 TouchableOpacity 时启动第二个屏幕。我同样使用 navigator。

我遇到了这个错误 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

Navigator 组件需要先渲染，然后渲染并将 navigator 属性传递给它的场景。

Undefined 不是对象（评估 this.props.navigator.push'）

Undefined is not an object( evaluating this.props.navigator.push')

android

react-native

react-native-android