React-Native：无法导航到第二个屏幕

Question

抱歉，如果我的问题有点长，但这是我的第一个问题，我真的很想知道我的代码有什么问题。 先感谢您

我的 React-Native 应用程序需要一些帮助。 所以简而言之，我的应用程序是关于一个登录屏幕（用户名和密码），带有一个用于保存登录的复选框和一个登录按钮。 输入用户名和密码后，第二个屏幕应该是一个简单的欢迎屏幕：“欢迎 {userName}”。 如果用户选中保存登录框并按下登录，应用程序将导航到第二个屏幕，他不能 go 返回（没有返回按钮）并且下次用户打开应用程序时直接将他/她带到第二个屏幕屏幕。

所以，我的问题是我无法导航到第二个屏幕，而且我不知道如何删除后退按钮。 这是我的代码：

应用程序.js：

 import React, { Component } from 'react'; import { SafeAreaView,Text,Button } from 'react-native'; import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer } from "react-navigation"; import FirstScreen from './first'; import SecondScreen from './second'; import myDB from './myDB'; const AppNavigator = createStackNavigator({ Login: FirstScreen, Welcome: SecondScreen }, { initialRouteName: "Login" }) const AppContainer = createAppContainer(AppNavigator) export default class App extends React.Component{ render() { return<AppContainer/>; } }

第一个.js：

 import React, { Component } from 'react'; import { SafeAreaView, Text, Button, TextInput, CheckBox, StyleSheet } from 'react-native'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import myDB from './myDB'; class FirstScreen extends Component { constructor (props) { super(props); } state = { userName: '', password: '', chkValue: false, }; handleUserName = (text) => { this.setState({ userName: text }); }; handlePasword = (text1) => { this.setState({ password: text1 }); }; openSecondScreen = () => { myDB.getData.userName = this.state.userName; myDB.getData.password = this.state.password; this.props.navigation.navigate('second'); }; chkChange = (text2) => { this.setState({ chkValue: text2 }); }; render() { return ( <SafeAreaView style={{ alignItems: 'center' }}> <Text>Username</Text> <TextInput style={styles.input} value={this.state.userName} placeholderTextColor="white" onChangeText={this.handleUserName} /> <Text>Password</Text> <TextInput style={styles.input} value={this.state.password} placeholderTextColor="white" onChangeText={this.handlePasword} secureTextEntry="true" /> <SafeAreaView style={styles.checkboxContainer}> <CheckBox value={this.state.chkValue} onValueChange={this.chkChange} style={styles.checkbox} /> <Text style={styles.label}>Save Login</Text> </SafeAreaView> <SafeAreaView style={styles.view1}> <Button style={styles.btn1} title="Login" onPress={this.openSecondScreen}></Button> </SafeAreaView> </SafeAreaView> ); } } export default FirstScreen; const styles = StyleSheet.create({ input: { height: 30, backgroundColor: 'white', paddingLeft: 15, paddingRight: 15, margin: 8, }, view1: { flexDirection: 'column', }, checkboxContainer: { flexDirection: 'row', marginBottom: 20, }, checkbox: { alignSelf: 'center', }, label: { margin: 8, }, });

第二个.js：

 import React, { Component } from 'react'; import { SafeAreaView, Text, Button } from 'react-native'; import myDB from './myDB'; class SecondScreen extends Component { state = { userName: myDB.getData.userName, password: myDB.getData.password }; render() { const { navigation } = this.props; const userName = navigation.getParam('userName', 'No-User'); const password = navigation.getParam('password', 'No-User'); return ( <SafeAreaView style={{ alignItems: 'center' }}> <Text>Welcome {this.state.userName}</Text> </SafeAreaView> ); } } export default SecondScreen;

myDB.js：

 import React, { Component } from 'react'; class myDb extends Component { static myVariable = { userName:'', password:'' }; static getData = (myVariable) => { return myVariable; }; } export default myDb;

我使用snack.expo.io 来构建这些应用程序，以防万一。

Answer 1

试试下面的小改动

this.props.navigation.navigate('second');

至

this.props.navigation.navigate('Welcome');

因为我们必须使用我们在导航器中指定的键来导航到特定屏幕。