Проблема с возвратом компонента из StackNavigator в react-native. Получается пустой экран, но с cosole.log все в порядке

Я хочу обернуть в самом верху моего приложения навигатор переключателей с именем MainNavigator, который перенаправляет на LoadingScreen, который определяет, зарегистрирован ли пользователь или нет, и переходит к AuthNavigator или AppNavigator. Сам AuthNavigator - это stackNavigator, отображающий экраны LoginScreen или SignUpScreen. AppNavigator - это DrawerNavigator с несколькими экранами (Профиль, Дом ...).

Проблема, с которой я столкнулся, заключается в том, что метод возврата, похоже, работает, потому что я могу видеть журналы в своей консоли из компонента «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',
    })

Экран входа в систему:

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. Я могу видеть 'LOGIN SCREEN' или 'APP SCREEN', если я установил маршрут AuthLoading для отображения приложения в моей консоли, но ничего на экране, когда я инициирую новый маршрут LoginScreen в моем MainNavigator и перейду к этому маршруту из AuthLoading it работает, у меня на экране отображается красивый текст.

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

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


person Leo Prud'hom    schedule 19.04.2019    source источник


Ответы (1)


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

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

Итак, я удаляю представление и строку состояния ... и все работает. 4 дня, чтобы разобраться ... Обожаю! : ')

person Leo Prud'hom    schedule 19.04.2019
comment
У меня все еще такая же проблема на устройстве Android, она хорошо работает на устройствах iOS, но не на устройствах Android. экраны становятся белыми, когда возвращаются на тот же экран из другого экрана ящика. - person anshuman burmman; 12.01.2020