React Navigation 5.x 堆栈导航显示空白屏幕答案

【问题标题】：React Navigation 5.x stack navigation show blank screenReact Navigation 5.x 堆栈导航显示空白屏幕
【发布时间】：2020-06-02 02:24:44
【问题描述】：

//app.js "react": "16.9.0","react-native": "0.61.5", 官方按照官方文档显示黑屏反应原生

import React from 'react';
import { SafeAreaView, StatusBar, View, Text } from 'react-native';
import { Provider } from 'react-redux';
import configureStore from './App/redux/store/store'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppSplashScreen from './App/screens/splashScreen/SplashScreen';
const Stack = createStackNavigator();


function MyStack() {
 return (
        <Stack.Navigator>
          <Stack.Screen name="Home" component={AppSplashScreen} />
        </Stack.Navigator>
 );
}

export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {}
   }

   render() {
        return (
                <>
                <StatusBar barStyle="dark-content" />
                  <SafeAreaView  >
                    <Provider store={configureStore()} >
                      <NavigationContainer>
                        <MyStack />
                      </NavigationContainer>
                    </Provider>
                 </SafeAreaView>
                </>
               );
             }

           };

但将 MyStack 替换为 AppSplashScreen 然后显示 SplashScreen

【问题讨论】：

它与安全区域上下文有关，而不是对导航本身做出反应

标签： javascript android react-native react-navigation-stack

【解决方案1】：

通过将style={{flex: 1}} 添加到 SafeAreaView 解决。

    const App = () => {   
        return (
           <SafeAreaView style={{flex: 1}}>
             <NavigationContainer>
               <Stack.Navigator initialRouteName="Home">
                 <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                  options={{title: 'Overview'}}
                 />
               </Stack.Navigator>
             </NavigationContainer>
          </SafeAreaView>   
    )};

【讨论】：

【解决方案2】：

这应该可以正常工作，尽量不要将 Stack.Navigator 与导航容器分开

这对我有用

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Homepage} />
          <Stack.Screen name="Notes" component={Notes} />
        </Stack.Navigator>
     </NavigationContainer>
   </Provider>
 );
}

导出默认应用；

【讨论】：