Содержимое в представлении не отображается

Question

извините за мой английский sh. У меня проблема с навигацией. В приложении js я хочу отобразить мой LoginScreen и изменить его на RegistrationScreen. Так что я решил использовать реакцию-навигацию. Ниже приведен результат работы при использовании Это приложение. js

import { StyleSheet, View, StatusBar } from 'react-native';
import LoginScreen from "./assets/src/screen/LoginScreen";
import AppContainer from './assets/src/Routes';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <StatusBar 
          backgroundColor="#1c313a"
          barStyle="light-content"
          />
          <LoginScreen />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#455a64',
    justifyContent: "center",
    alignItems: "center"
  },
});

Результат с навигацией не работает; / Приложение. js

import { StyleSheet, View, StatusBar } from 'react-native';
import LoginScreen from "./assets/src/screen/LoginScreen";
import AppContainer from './assets/src/Routes';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <StatusBar 
          backgroundColor="#1c313a"
          barStyle="light-content"
          />
          <AppContainer />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#455a64',
    justifyContent: "center",
    alignItems: "center"
  },
});

Маршруты. js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from "./screen/LoginScreen";

const Stack = createStackNavigator();

function AppContainer() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppContainer;

Файл LoginScreen. js

import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { render } from 'react-dom';
import Logo from "../components/Logo";
import Form from "../components/Form";

export default class Login extends React.Component{
  render(){
    return(
      <View>
          <Logo />
          <Form type="Login" />
          <View style={styles.signUpTextCont}>
            <Text style={styles.signUpText}>Don't have an account yet?</Text>
            <TouchableOpacity>
              <Text style={styles.signupButton}> Sign Up</Text>
            </TouchableOpacity>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#455a64',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signUpTextCont: {
    flex: 1,
    alignItems: "flex-end",
    justifyContent: "center",
    flexDirection: "row",
    paddingVertical: 16,
    marginVertical: 30
  },
  signUpText: {
    color: "rgba(255,255,255, .6)",
    fontSize: 16
  },
  signupButton: {
    color:'#ffffff',
    fontSize:16,
    fontWeight:'500'
  },
  button: {
    width:300,
    backgroundColor:'#1c313a',
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 13
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'
  },
});

Я читал на форуме, что flex решил эту проблему, но нет; /