我是 React Native 的新手,StackNavigator
在 React-Native 中使用组件时遇到了未定义道具的问题。
我花了几天时间寻找我的问题的答案,但没有找到解决问题的合适方法。
问题在于将道具传递给子组件,它们是未定义的,但是,除了这些步骤之外,我遵循的教程没有做任何其他事情。
这是我的应用程序的屏幕和代码
在我的 LoginScreen 中点击绿色按钮时,预期结果是导航到我的 MainScreen,但结果是“道具未定义”
如果有人可以帮助我解决这个问题并帮助我找出问题所在,我将非常感激!
我的代码:
应用程序.js 文件
import React from 'react';
import { StyleSheet, Text, View, StatusBar} from 'react-native';
import Login from './src/components/login/Login';
import {StackNavigator} from 'react-navigation';
import MainScreen from './src/components/main/MainScreen';
export default class App extends React.Component {
static navigationOptions = { title: 'Welcome', header: null };
render() {
return (
<AppNavigation />
);
}
}
const AppNavigation = StackNavigator({
LoginScreen : {screen : Login},
MainScreen : {screen : MainScreen},
})
const styles = StyleSheet.create({
container: {
backgroundColor: '#3498db',
alignItems: 'center',
justifyContent: 'center',
},
});
Login.js ,这个组件描述了我的登录页面。它还呈现组件 LoginForm,我在其中描述 InputText 和 TouchableOpacity,其中我有 onPress 方法,它必须将我导航到 MainScreen
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image
} from 'react-native';
import LoginForm from './LoginForm'
export default class Login extends React.Component {
static navigationOptions = { title: 'Welcome', header: null };
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image
source = {require('../../../images/logo.png')}
style = {styles.logo}>
</Image>
<Text style = {styles.title}>Добро пожаловать!</Text>
<Text style = {styles.titleLower}>Введите код для авторизации</Text>
</View>
<View style = {styles.formContainer}>
<LoginForm/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor : '#3493db'
},
logoContainer : {
flexGrow : 1,
alignItems : 'center',
justifyContent : 'center'
},
logo : {
width : 120,
height : 120
},
title : {
color : '#fff',
marginBottom : 10,
fontSize : 22
},
titleLower : {
color : '#fff',
marginTop : 5,
fontSize : 12
}
});
登录表单.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
StatusBar
} from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<TextInput
placeholder = "ваш пароль"
placeholderTextColor = '#fff'
underlineColorAndroid = {'transparent'}
style = {styles.input}
secureTextEntry>
</TextInput>
<TouchableOpacity
style= {styles.buttonContainer}
onPress = {() =>
this
.props
.navigation
.navigate('MainScreen')}>
<Text style= {styles.buttonText}>Войти</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20,
},
input : {
backgroundColor : 'rgba(255, 255, 255, 0.2)',
height : 40,
marginBottom : 10,
color : '#FFF',
fontSize : 16
},
buttonContainer : {
backgroundColor : '#00B241',
paddingVertical : 10,
alignItems: 'center',
justifyContent: 'center',
marginBottom : 30
},
buttonText : {
textAlign : 'center',
color : '#fff'
}
});