添加反应导航后反应本机应用程序中的空屏幕

Question

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import Home from "./screens/Home";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import MeetingRoom from "./screens/MeetingRoom";

export default function App() {
    const Stack = createNativeStackNavigator();
    return (
        <View>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="home" component={Home} />

                    <Stack.Screen name="room" component={MeetingRoomh} />
                </Stack.Navigator>
            </NavigationContainer>
            <StatusBar style="light" />
        </View>
    );
}

const styles = StyleSheet.create({});

在我的应用程序中添加 React 导航后，我的应用程序只显示平面白屏。所以任何人都知道我如何修复白屏并恢复 ui 和运行。我正在使用 expo

在我的 android phone 上测试我的应用程序

在此先感谢您对我的帮助

Answer 1

您正在用 <View/> 包装您的 <NavigationContainer/>。而且它没有风格。您可以将其交给 flex 1 或将其删除。在 React 导航的典型设置中，您不希望用 <View/> 包裹 <NavigationContainer/>。我的建议是删除 <View/>.

This is also what react-navigation suggests.

添加反应导航后反应本机应用程序中的空屏幕

Empty screen in react native app after adding react navigation

user-interface

reactjs

react-native

react-navigation