React Native StackNavigator InitialRouteName

В библиотеке React Native Navigation 'реагировать-навигация'

Как я могу установить StackNavigator initialRouteName с помощью AsyncStorage?

function getInitialScreen() {
    AsyncStorage.getItem('initialScreen')
        .then(screenName => {
            return (screenName)
                ? screenName
                : 'Login';
        })
        .catch(err => {});
}

const Navigator = StackNavigator({
    Splash: { screen: Splash },
    Login: { screen: Login },
    WebPage: { screen: WebPage }
}, {
    initialRouteName: getInitialScreen()
});

person amorenew    schedule 11.10.2017    source источник


Ответы (3)


Изменение InitialRouteName с несколькими маршрутами в зависимости от ваших требований. У меня это работает таким образом.

создайте router файл, импортируйте все свои экраны.

экспортируйте функцию без сохранения состояния, назовите ее createRootNavigator с параметрами как (load="<Your initial screen>")

export const createRootNavigator = (load="<Your Initial Screen>") => {
  return stackNavigator({
     Initialize: {
       screen: Initialize,
     },
     Main: {
      screen: Main,
     },
     { 
       initialRouteName: load
     }
  })
}

В вашем основном приложении

state = {
  load: "<Your Initial Screen>"
}

eg:

state = {
   load: "Initialize" // value is string
}

Установите состояние соответственно в методе componentDidMount(). И, наконец, визуализировать новый макет.

render() {
  const Layout = createRootNavigator(this.state.load);
  <Layout />
}

Вышеупомянутый метод отлично работал для меня. Надеюсь, это поможет кому-то.

person Srinivas    schedule 30.03.2018

У меня также была эта проблема, и в настоящее время единственным хорошим решением является следующий пример:

 const RootNavLogged = StackNavigator({
     ...
  },{
     initialRouteName : 'Home'
  });

  const RootNav = StackNavigator({
     ...
  },{
     initialRouteName : 'Login'
  });

  class App extends Component {
     render(){
         if (this.props.userLogged == true ){
            return (
               <RootNavLogged/>
            ) 
          } else {
             return(
                <RootNav/>
              ) 
          }
     }
 }
person Alexander Vitanov    schedule 11.10.2017
comment
он должен быть гибким, я открою вопрос об их репо - person amorenew; 11.10.2017

Полное решение от React Native Navigation on Restart:

const Navigator = StackNavigator({
    InitialScreen: {
        screen: InitialScreen
    },
    Splash: {
        screen: Splash
    },
    LanguageStartup: {
        screen: LanguageStartup
    },
    Login: {
        screen: Login
    },
    Register: {
        screen: Register
    }
}, {initialRouteName: 'InitialScreen'});

export default Navigator;

Мой начальный экран

import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as GeneralPref from './../preferences/GeneralPref'
import Log from './../utils/Log'
import {AsyncStorage, View} from 'react-native';
import * as Pref from './../preferences/Preferences';
import {NavigationActions} from 'react-navigation'

const TAG = 'InitialScreen'

class InitialScreen extends Component {
    static navigationOptions = {
        header: false
      };
    componentWillMount() {
        Log(TAG+' Mount')
        const {navigate} = this.props.navigation;
        GeneralPref
            .getInitialScreen()
            .then(value => {
                Log(TAG+' Initial',value)                
                if (value != null) {
                    Log(TAG+' Initial',value)                                    
                    return value
                } else {
                    Log(TAG+' No Initial','Splash')                                    
                    return 'Splash'
                }
            })
            .then(screenName => this.props.navigation.dispatch(NavigationActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({routeName: screenName})]
            })))
            .catch(err => {
                Log(TAG+' Initial Error',value)                                
                this.props.navigation.dispatch(NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({routeName: 'Splash'})]
                }))
            });
    }
    render() {
        return null;
    }
}

export default InitialScreen;

затем на экране языка

changeLanguageTo(language) {
    Log(TAG+'Change Language', "Change Language To: " + language.code);
    // Log(TAG, 'Current State');
    Log(TAG+' Language State', language);
    GeneralPref.setInitialScreen('Login');

    this
      .props
      .actions
      .changeLanguage(language);
      I18nManager.forceRTL(true);      
    // Immediately reload the React Native Bundle
    RNRestart.Restart();
  };
person amorenew    schedule 12.10.2017