![](/img/trans.png)
[英]Navigation issue undefined is not an object (evaluating '_this2.props.navigation.navigate')
[英]undefined is not an object (evaluating _this2.props.navigation.navigate)
我正在使用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')
造成此错误的原因是什么?
只是。 <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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.