Проблема вернуть компонент из StackNavigator в реагирующий Получить пустой экран, но cosole.log в порядке

Question

То, что я хочу сделать, - это обернуть в самом верху моего приложения навигатор переключателей с именем MainNavigator, который перенаправляет на экран загрузки, который определяет, зарегистрирован ли пользователь или нет, и переходит к AuthNavigator или AppNavigator.AuthNavigator сам является стека-навигатором, который отображает экраны «LoginScreen» или «SignUpScreen».AppNavigator - это DrawerNavigator с несколькими экранами (Profile, Home ...).

Проблема, с которой я согласен, заключается в том, что метод return работает, потому что я вижу журналы в консоли из компонента LoginScreen.но на экране единственное возвращение - белый экран. Когда я вызываю напрямую свой компонент LoginScreen из компонента LoadingScreen, используя:

_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');

// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away. switched to develop the app
this.props.navigation.navigate(userToken ? 'App' : 'LoginScreen');

};

У меня на устройстве отображался компонент LoginScreen.

Я знаю, что проблема возникла из моих AuthNavigator и AppNavigator, потому что я могу вернуть компоненты экранов из AuthLoading или MainNavigator. Вот некоторый код:

 * Main Navigator: entry point of the app
 * Redirect to AuthLoadingScreen by default,
 * if user is signed (AsyncStorage) or successly signIn
 * redirect to AppNavigator else if user isn't SignIn
 * go to AuthNavigator

import { createAppContainer, createSwitchNavigator } from 'react- 
navigation';

import AuthNavigator from './auth/AuthNavigator'
import AppNavigator from './app/AppNavigator'
import AuthLoadingScreen from '../screens/auth/AuthLoadingScreen'


export default createAppContainer(createSwitchNavigator(
  {
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  AuthLoading: AuthLoadingScreen,
  App: AppNavigator,
  Auth: AuthNavigator,
  },
  {
    initialRouteName: 'AuthLoading',
  }

  ));

AuthLoading:

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
  Text
} from 'react-native';

export default class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away. switched to develop the app
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {

    return (
      <View>
      <Text>Loading</Text>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

AuthNavigator:

import { createStackNavigator } from 'react-navigation';

import LoginScreen from '../../screens/auth/LoginScreen';
import SignUpScreen from '../../screens/auth/SignUpScreen';

export default createStackNavigator({
    Login : {
        screen : LoginScreen
    },
    SignUp: {
        screen : SignUpScreen
    }
    }, 
    {
    initialRouteName: 'Login',
    })

LoginScreen:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class LoginScreen extends Component {
    render() {
      console.log('LOGIN SCREEN')
      return (
        <View style={styles.container}>
          <Text style={styles.text}>Login</Text>
        </View>
      );
    }
}


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    text : {
      fontSize: 20,
    }
  });

Я не могу найти ошибку, но я знаю, что она исходит от AuthNavigator и AppNavigator.Я могу видеть «ЭКРАН ВХОДА» или «ЭКРАН ПРИЛОЖЕНИЯ», если я задаю маршрут AuthLoading для отображения приложения в моей консоли, но ничего на экране, когда я запускаю новый маршрут LoginScreen в моем MainNavigator и перехожу на этот маршрут из AuthLoading.работает, у меня на экране отображается красивый текст.

Я знаю, что это, вероятно, незначительная ошибка, но я трачу часы, чтобы исправить это самостоятельно, и не могу найти, поэтому, если кто-то может мне помочь, было бы неплохо!

Заранее спасибо!

Answer 1

Проблема решена ... Потому что в верхней части моего приложения в App.js я обернул свой MainNavigator вот так

<View>
<StatusBar hidden={true} /> 
<MainNavigator />
</View>

Поэтому я удаляю вид и строку состояния ... и это работает.4 дня, чтобы понять это ... Я люблю это!: ')