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

时间:2020-02-18 05:54:32

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

// 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

1 个答案:

答案 0 :(得分:1)

这应该很好,请不要将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>
 );
}

导出默认应用;