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

Question

我正在使用 React Native Navigation 依赖项作为路由。但是我在下面的代码中遇到了问题，它似乎什么也没做。

我正在尝试创建 2 个屏幕，一个是登录，另一个是注册（稍后我将添加按钮在它们之间移动，现在即使默认屏幕也不起作用）。

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

Login.JS

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;

通过阅读应该有效的文档，但我不明白这里有什么问题。

我在堆栈屏幕区域收到空白区域。

我试过用功能替换Register组件，也没用。

如何正确显示 React Native Navigation 堆栈屏幕？

Answer 1

让 Navigation Container 包装 App.js 的内容如何，然后您可以将 Stack 导航器和屏幕留在 Login 组件中

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

React native navigation not displaying stack screen

javascript

reactjs

react-native

react-native-navigation