所以,我正在为我的编程课做一个巨大的移动应用项目。我们有一个“客户端”,我们仍然在等待设置服务器,所以我们有一个登录按钮,但它没有连接到数据库或任何其他东西。目前,我只是想让登录按钮导航到主屏幕,以便我们可以点击所有内容以确保一切正常。
我在网上找到的例子和论坛都假设我的按钮和导航将在主App.js文件中。或者所有登录按钮都弹出一个警告对话框。当按下按钮时,我可以弹出一个警告对话框,所以我知道该按钮与导航不同。我的按钮实际上位于一个名为LoginScreen.js的不同文件中,该文件从App.js添加到导航堆栈中。我只是想知道我是否错过了一个库,或者我是不是正确地调用了一些东西。我发现的很多其他论坛都已经过时了。
我需要我的按钮才能从LoginScreen.js文件中工作,我需要它才能导航到另一个页面(MainScreen.js)。有谁知道为什么这不起作用?
我的App.js文件:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'
import LoginScreen from './components/LoginScreen'
import MainScreen from './components/MainScreen'
const AppStackNavigator = createStackNavigator({
Login:{ screen: LoginScreen },
Main:{ screen: MainScreen }
})
const App = createAppContainer(AppStackNavigator);
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
我的LoginScreen.js文件:
import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet, Button} from 'react-native';
import MainScreen from './MainScreen'
export default class Login extends Component {
render() {
return (
<View style = {styles.container}>
<Text style = {styles.header}>
Welcome to Symbol Single
</Text>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "[email protected]"
placeholderTextColor = "#e997a1"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "********"
placeholderTextColor = "#e997a1"
autoCapitalize = "none"
onChangeText = {this.handlePassword}/>
<Button title="Login"
style={styles.submitButton}
onPress={() => this.props.navigation('MainScreen')}/>
<View style = {{flex: 3, backgroundColor: '#172532'}}></View>
</View>
)
}
}
这是我第一次发帖到论坛寻求帮助,所以如果有任何需要澄清,请告诉我。
它应该是this.props.navigation.navigate("Main")
。
至少这是我迄今为止在我创建的应用程序中所做的事情。
看看这里:https://reactnavigation.org/docs/en/navigation-prop.html
希望这可以帮助!