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

Question

对不起，如果我的问题有点长，但这是我在这里的第一个问题，我真的很想知道我的代码有什么问题。提前谢谢你

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

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

App.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/>;
  }
}

first.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,
  },
});

second.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');

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