陣營本地StackNavigator initialRouteName

Question

在陣營本地導航庫「反應導航」

我怎麼能設置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() 
}); 

Answer 1

我也有這個問題，目前唯一好的解決方案是下面的例子：

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/> 
      ) 
      } 
    } 
} 

Answer 2

從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(); 
    };