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

抱歉，如果我的问题有点长，但这是我在这里的第一个问题，我真的很渴望知道我的代码有什么问题。提前谢谢。

请教一下，我需要帮助解决我的React-Native应用程序问题。简而言之，我的应用程序是关于一个登录界面（用户名和密码），带有一个复选框来保存登录信息和一个登录按钮。在输入用户名和密码后，第二个界面应该是一个简单的欢迎界面：“欢迎{name}”。如果用户勾选保存登录框并点击登录按钮，应用程序将转到第二个界面，并且无法返回（没有返回按钮），下次用户打开应用程序时，它直接进入第二个界面。

所以，我的问题是我无法导航到第二个界面，也不知道如何移除返回按钮。

以下是我的代码：

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 ;
  }
}

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 });
  };
  handlePassword = (text) => {
    this.setState({ password: text });
  };
  openSecondScreen = () => {
    myDB.getData.userName = this.state.userName;
    myDB.getData.password = this.state.password;
    this.props.navigation.navigate('Welcome');
  };
  chkChange = (value) => {
    this.setState({ chkValue: value });
  };
  render() {
    return (
      
        Username
        
        Password
        
        
          
          Save Login
        
        
          
        
      
    );
  }
}
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 } from 'react-native';
import myDB from './myDB';
class SecondScreen extends Component {
  state = {
    userName: myDB.getData.userName,
    password: myDB.getData.password
  };
  render() {
    const { userName } = this.state;
    return (
      
        Welcome {userName}
      
    );
  }
}
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来构建这些应用程序，以防有所帮助。