为什么我的反应导航按钮不起作用？

Question

所以，我正在为我的编程课做一个巨大的移动应用项目。我们有一个“客户端”，我们仍在等待在其端设置服务器，所以我们有一个登录按钮，但它还没有连接到数据库或任何东西。目前，我只是想让登录按钮导航到主屏幕，以便我们可以单击所有内容以确保一切正常。

我在网上找到的示例和论坛都假设我的按钮和导航将位于主 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@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>
        )
    }
}

这是我第一次在论坛上发帖寻求帮助，如果有什么需要澄清的，请告诉我。

Answer 1

应该是this.props.navigation.navigate("Main")。

至少这是我迄今为止在我创建的应用程序中所做的。

看这里：https://reactnavigation.org/docs/en/navigation-prop.html

希望这会有所帮助！