反應原生導航不顯示堆棧屏幕

Question

我使用React Native Navigation依賴作為路由。 但是我在下面的代碼中遇到了問題，它似乎什么也沒做。

我正在嘗試創建 2 個屏幕，一個是登錄，另一個是注冊（稍后我將添加按鈕在它們之間移動，現在即使默認屏幕也不起作用）。

應用程序.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>
  );
}

登錄.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;

通過閱讀應該有效的文檔，但我不明白這里有什么問題。

我在堆棧屏幕區域收到空白區域。

我試圖用 function 替換Register組件，也沒有工作。

如何正確顯示React Native Navigation堆棧屏幕？

Answer 1

讓導航容器包裝 App.js 的內容怎么樣，然后您可以將堆棧導航器和屏幕留在登錄組件中

Answer 2

導航周圍的容器具有背景色，因此請刪除它周圍的所有背景色並再次查看。