react-native – React Native:TypeError:undefined不是对象(
发布时间:2020-12-15 09:32:53 所属栏目:百科 来源:网络整理
导读:作为反应原生的初学者,我无法弄清楚我的代码中的问题.通过在互联网上阅读,我有一个想法,我可能有一些约束性的问题. 所以,我的代码以index.js开头,并在那里注册App组件. app组件只包含堆栈导航路由.它加载LoginScreen组件(显示应用程序的徽标,背景和名称),然
作为反应原生的初学者,我无法弄清楚我的代码中的问题.通过在互联网上阅读,我有一个想法,我可能有一些约束性的问题.
所以,我的代码以index.js开头,并在那里注册App组件. app组件只包含堆栈导航路由.它加载LoginScreen组件(显示应用程序的徽标,背景和名称),然后加载LoginForm组件. “登录”按钮上没有身份验证,我唯一需要的是在按下“登录”按钮时加载了菜单组件.它给出了TypeError:undefined不是一个对象(评估’this.props.navigation.navigate’) index.js import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('bluebulk',() => App); App.js import { StackNavigator } from 'react-navigation'; import LoginScreen from './src/components/login/LoginScreen'; import Menu from './src/components/menu/Menu'; const App = StackNavigator({ Main: { screen: LoginScreen },Menu: { screen: Menu } }); export default App; LoginScreen.js import { StackNavigator } from 'react-navigation'; import React,{ Component } from 'react'; import { StyleSheet,View,Text,Image } from 'react-native'; import LoginForm from './LoginForm'; class LoginScreen extends Component { render() { return ( <View style={styles.container}> <View style={styles.logoContainer}> <Image style={styles.logo} source={require('../../images/transparent.png')} /> <View style={{ flexDirection: 'row' }}> <Text style={styles.blueTextStyle}>Blue</Text> <Text style={styles.bulkTextStyle}>Bulk</Text> </View> </View> <View style={styles.formContainer}> <LoginForm /> </View> </View> ); } } export default LoginScreen; LoginForm.js import React,{ Component } from 'react'; import { StyleSheet,TextInput,TouchableOpacity,KeyboardAvoidingView,Keyboard } from 'react-native'; import { StackNavigator } from 'react-navigation'; class LoginForm extends Component { render() { return ( <KeyboardAvoidingView behavior='height' style={styles.container}> <View style={{ flexDirection: 'row' }}> <Text style={styles.textStyle}>Email:</Text> <TextInput style={styles.styleInput} placeholder="user@gmail.com" returnKeyType="next" keyboardType="email-address" onSubmitEditing={() => this.refs.password.focus()} /> </View> <View style={{ flexDirection: 'row' }}> <Text style={styles.textStyle}>Password:</Text> <TextInput ref='password' style={styles.styleInput} placeholder="password" secureTextEntry returnKeyType="go" onSubmitEditing={Keyboard.dismiss} /> </View> <TouchableOpacity style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Menu')} //Error here > <Text style={styles.buttonText}>Login</Text> </TouchableOpacity> </KeyboardAvoidingView> ); } } export default LoginForm; Menu.js import React,TouchableOpacity } from 'react-native'; import { StackNavigator } from 'react-navigation'; class Menu extends Component { render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <View style={styles.viewContainer}> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.buttonText}>View Products</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.buttonText}>View Discounts/Offers</Text> </TouchableOpacity> <TouchableOpacity style={styles.buttonContainer}> <Text style={styles.buttonText}>View Invoice History</Text> </TouchableOpacity> </View> </View> ); } } export default Menu; 解决方法
您需要将导航道具向下传递到LoginForm组件.
试试这个:< LoginForm navigation = {this.props.navigation} /> 您应该得到以下结果: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |