反应导航显示黑屏

时间:2020-07-22 13:00:54

标签: react-native expo react-navigation react-navigation-v5

我刚刚启动了一个新的expo项目,并且尝试使用react navigation v5,但是它仅显示空白屏幕,但是如果我直接渲染视图,它将显示。我的main.js在下面

import { StatusBar } from 'expo-status-bar';

import 'react-native-gesture-handler';
import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef, isMountedRef } from './src/navigation/RootNavigation'
import Linking from './src/navigation/Linking';
import UserLogin from './src/screens/UserScreens/Auth/UserLogin';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ForgotPassword from './src/screens/UserScreens/Auth/ForgotPassword';

const Stack = createStackNavigator();


const Main = () => {
    React.useEffect(() => {
        isMountedRef.current = true;
    
    
    
        return () => (isMountedRef.current = false);
    }, []);
    const UserAuthStack = () => (
        <Stack.Navigator>
            <Stack.Screen component={ForgotPassword} name='userForgotLogin' options={{headerShown: false}} />        
            <Stack.Screen component={UserLogin} name='userLogin'  options={{headerShown: false}} />
        </Stack.Navigator>
    )
    let RenderedContent = <UserAuthStack />
    return (
        <View>
            <StatusBar style="auto" />
            <NavigationContainer
                ref={navigationRef}
                linking={Linking}
                fallback={<ActivityIndicator size={'large'} color={'#000'} />}
            >
                {RenderedContent}
                {/* <UserLogin /> */}
                {/* <ForgotPassword /> */}
            </NavigationContainer>
        </View>
    )
}

export default Main;

如果我注释掉{RenderedContent}并取消注释下面的任何屏幕,则会显示假定的页面。

这里有什么问题吗?

2 个答案:

答案 0 :(得分:0)

解决方案有点隐藏。 但这是空白的,因为我将整个事情都包裹在import numpy as np np.isnan(math.nan) # True np.isnan(float('nan')) # True 周围,而删除就解决了问题

答案 1 :(得分:0)

设置 <View style={{ flex: 1 }}/> 应该可以解决问题。