undefined 不是对象（正在计算 _this2.props.navigation.navigate）

Question

我正在使用 react-native，我遇到了导航器问题。

代码：

App.js

import React, {Component} from 'react';
import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
} from 'react-native';

import { StackNavigator } from 'react-navigation';

import loginScreen from './src/components/loginView';
import registerScreen from './src/components/registerView';

const Appmemes = StackNavigator({
   Login: {screen: loginScreen},
   Register: {screen: registerScreen}
});

export default Appmemes;

AppRegistry.registerComponent('Appmemes', () => Appmemes);

loginView.js 正常工作：

.
.
.
  <View style={styles.formContainer}>
          <LoginForm/>
  </View>
.
.
.

LoginForm.js

import React, { Component } from 'react'
import { StyleSheet, TextInput, Text, View, TouchableOpacity, AppRegistry} from 'react-native'
import { StackNavigator} from 'react-navigation';

export default class LoginForm extends Component{
  render() {
      return(
      <View style={styles.container}>

          <TouchableOpacity style={styles.buttonContainer1}>
            <Text style={styles.buttonText}>Entrar</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.buttonContainer2} onPress={() => this.props.navigation.navigate('Login')}>

            <Text style={styles.buttonText}>Registrarse</Text>
          </TouchableOpacity>
      </View>
    );
  }
}

AppRegistry.registerComponent('LoginForm', () => LoginForm);

const styles = StyleSheet.create({...]);
});

错误是：

undefined is not an object (evaluating _this2.props.navigation.navigate)

错误在OnPress()在LoginForm.js

onPress={() => this.props.navigation.navigate('Login')

导致此错误的原因可能是什么？

Answer 1

简单。 <LoginForm navigation={this.props.navigation} />

发生错误是因为 LoginFrom 没有使用 StackNavigator 直接加载，只有那些由 StackNavigator 直接加载的组件才能获得 navigation 属性（比如loginScreen 在你的情况下）。 loginScreen 中的任何嵌套组件都不会自动接收 navigation 属性，因此我们需要将其显式传递给 LoginForm，因为它将传递给 loginScreen.

我回答过类似的问题。

旁注：我相信您再次使用 this.props.navigation.navigate('Login') 从 loginScreen 内部导航到 loginScreen，因为 LoginForm 是在 loginScreen 本身内部。所以在这种情况下，您可能打算导航到 Register。所以你应该写 this.props.navigation.navigate('Register').

此外，您也不需要AppRegistry.registerComponent('LoginForm', () => LoginForm);，因为您只需要向AppRegistry注册一个根组件。因此，Appmemes 应该只注册到您已经在做的 AppRegistry。 LoginForm 将自动由 loginScreen 安装，而 loginScreen 又将由 Appmemes 安装。

undefined 不是对象（正在计算 _this2.props.navigation.navigate）

undefined is not an object (evaluating _this2.props.navigation.navigate)

javascript

node.js

reactjs

react-native

react-native-navigation