Невозможно перейти к нужному экрану, используя реагирующую навигацию?

Question

Я хочу перейти на другой экран, когда у меня есть элемент AsyncStorage для authFlow, но когда я перехожу на следующий экран и конструкция вызывает функцию, она не переходит на следующий экран.

Я попытался использовать базовый метод this.props.navigation.navigate ('navigator_name'), но я думаю, что он не движется, так как появляется пустой экран.

App.js
------
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

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

import AuthLoadingScreen from './screens/auth-loading-screen';
import WelcomeScreen from './screens/welcomeScreen';
import AppHomeScreen from './screens/app-home-screen';

const AuthStackNavigator = createStackNavigator({
  welcome: WelcomeScreen
})

// export default 
const TestContainer = createAppContainer(createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    Auth: AuthStackNavigator,
    App: AppHomeScreen,
  },
  {
    initialRouteName: 'AuthLoading',
  }
))

export default class App extends React.Component {
  constructor () {
    super()
    this.state = {
      loggedIn: 'false',
    }
  }

  render() {
    return(
      <View style={styles.container}>
        <TestContainer />
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


auth-loading-screen
-------------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, AsyncStorage } from 'react-native';

export default class AuthLoadingScreen extends Component {

    constructor (props) {
        super(props);
        console.log('calling _loadApp')
        this._loadApp();
    }

    _loadApp = async() => {
        const userToken = await AsyncStorage.getItem('userToken');
        console.log('getting value of token ', userToken, JSON.stringify(this.props.navigation.actions))
        this.props.navigation.navigate(userToken ? 'App' : 'Auth')
    }

   render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
            </View>
        )
    }
}

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

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

export default class WelcomeScreen extends Component {
    constructor (props) {
        super(props);
    }
   render() {
        return (
            <View style={styles.container}>
                <Text>Welcome</Text>
            </View>
        )
    }
}

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

Экран должен двигаться прямона welcomeScreen, так как элемент не установлен через AsynStorage

Answer 1

Ваша функция асинхронная.Однако конструктор не может выполнить асинхронную функцию.Поэтому вам следует изменить позицию выполнения функции.

  async componentDidMount() {
    await this._loadApp();
  }