未定義不是對象（評估_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({...]);
});

錯誤是：

未定義不是對象（評估_this2.props.navigation.navigate）

錯誤出現在LoginForm.js的OnPress()中

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 。