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

问题描述 投票:1回答:1

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

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

这是我第一次发帖到论坛寻求帮助,所以如果有任何需要澄清,请告诉我。

react-native react-navigation react-native-navigation
1个回答
3
投票

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

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

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

希望这可以帮助!

© www.soinside.com 2019 - 2024. All rights reserved.