为什么我的react导航按钮不工作？
为什么我的react导航按钮不工作？
提问于 2019-04-12 01:07:20
所以，我正在为我的编程课做一个巨大的移动应用程序项目。我们有一个“客户”，我们仍在等待他在他们那端设置服务器，所以我们有一个登录按钮，但它还没有连接到数据库或其他任何东西。目前，我只是想让登录按钮导航到主屏幕，这样我们就可以点击所有的东西，以确保它们都正常工作。
我在网上找到的示例和论坛都假定我的按钮和导航位于主App.js文件中。或者所有的登录按钮只是弹出一个警告对话框。当按钮被按下时，我可以弹出一个警告对话框，这样我就知道除了导航之外，按钮还可以工作。我的按钮实际上在从App.js添加到导航堆栈的另一个名为LoginScreen.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@address.com"
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>
)
}
}这是我第一次在论坛上发帖寻求帮助，如果有什么需要澄清的，请告诉我。
回答 1
Stack Overflow用户
发布于 2019-04-12 01:11:22
应该是this.props.navigation.navigate("Main")。
至少这是我到目前为止在我创建的应用程序中所做的事情。
看看这里：https://reactnavigation.org/docs/en/navigation-prop.html
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55637842
复制相关文章
相似问题