React native 为什么我的反应导航按钮不工作？

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

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

import React，{Component}来自'React'；
从“react native”导入{Text，View，TextInput，样式表，Button}；
从“/MainScreen”导入主屏幕
导出默认类登录扩展组件{
render（）{
返回(
欢迎来到Symbol Single
this.props.navigation（'MainScreen'）}/>
)
}
}

---

这是我第一次发布到论坛寻求帮助，所以如果需要澄清，请告诉我。

应该是

This.props.navigation.navigate（“Main”）

至少到目前为止，我在自己创建的应用程序中一直在这么做

请看这里：

---

希望这有帮助

嘿，阿杰，谢谢你的建议。不幸的是，这一行代码并没有带来什么不同。所以，我试着去你给我的链接，它看起来和我代码中已有的没有多大区别。我确实深入了几页，也尝试了分派方法，但这也没有什么区别。@AjayGupta是正确的，但是您需要导航到“Main”。

createStackNavigator

中为堆栈指定的每个键都是要导航到的路由的名称，因此在本例中，您有路由“Login”和“Main”