Я хочу обернуть в самом верху моего приложения навигатор переключателей с именем 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 работает, у меня на экране отображается красивый текст.
Я знаю, что это, вероятно, незначительная ошибка, но я трачу часы, чтобы исправить это сам, и не могу найти, поэтому, если кто-то может мне помочь, было бы неплохо!
Заранее спасибо!