Javascript 反应本机导航不显示堆栈屏幕

我使用依赖关系作为路由。但是我在下面的代码中遇到了问题，它似乎什么也不做

我正在尝试创建两个屏幕，一个是登录，另一个是注册（稍后我将添加按钮在它们之间移动，现在甚至默认屏幕都不工作）

App.JS

import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import Login from './login.js';

export default function App() {
  return (
    <View>
       <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
       <Login/>
    </View>
  );
}

import React from 'react';
import Register from './register.js';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function LoginScreen() {
  return (
    <View style={{ flex: 1, paddingTop: 100, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}


const Stack = createStackNavigator();

function Login() {
    return (
      <View style={styles.container}>
        <Text style={styles.logo}>My Title</Text>
        <Text style={styles.slogan}>Welcome</Text>
      

        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        </NavigationContainer>

      </View>
    );
  }

  export default Login;

从“React”导入React；
从“react native”导入{View，StatusBar，Text}；
从“./Login.js”导入登录名；
导出默认函数App（）{
返回(
);
}

Login.JS

import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import Login from './login.js';

export default function App() {
  return (
    <View>
       <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
       <Login/>
    </View>
  );
}

import React from 'react';
import Register from './register.js';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function LoginScreen() {
  return (
    <View style={{ flex: 1, paddingTop: 100, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}


const Stack = createStackNavigator();

function Login() {
    return (
      <View style={styles.container}>
        <Text style={styles.logo}>My Title</Text>
        <Text style={styles.slogan}>Welcome</Text>
      

        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        </NavigationContainer>

      </View>
    );
  }

  export default Login;

从“React”导入React；
从“./Register.js”导入寄存器；
从“react native”导入{样式表、文本、视图、TouchableOpacity}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
函数LoginScreen（）{
返回(
主屏幕
);
}
const Stack=createStackNavigator（）；
函数登录（）{
返回(
我的头衔
欢迎
);
}
导出默认登录；

通过阅读那些应该有效的文档，我不明白这里出了什么问题

我收到堆栈屏幕区域中的空白区域

我试着用函数替换

寄存器

组件，但也不起作用

---

如何正确显示本机导航堆栈屏幕？

让导航容器包装App.js的内容，然后您可以将堆栈导航器和屏幕保留在登录组件中

我看不到任何错误，我会尝试删除

initialRouteName

或使用

NavigationContainer

@EnzoPerez包装应用程序组件。谢谢你，它似乎只在包装整个文件后对

App.js

文件有效。