重新启动时反应本机导航

本文介绍了重新启动时反应本机导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 react-native-restart 库来重新启动应用程序，以便我可以在运行时更改应用程序语言.重新启动应用程序后，我想在重新启动应用程序后更改 react-navigation 库中的第一个 StackNavigator 屏幕.

I am using the react-native-restart library for restarting the app so I can change the app language in the runtime. After I restart the app I want to change the first StackNavigator screen in the react-navigation library after restarting the app.

导航类是这样的

import Screen1 from './Screen1' import Screen2 from './Screen2' import Screen3 from './Screen3' import {StackNavigator} from 'react-navigation'; const Navigator = StackNavigator({ Screen1: { screen: Screen1 }, Screen2: { screen: Screen2 }, Screen3: { screen: Screen3 } }); export default Navigator;

在屏幕 2 中，我通过以下功能更改语言并重新启动应用程序:

in screen 2 I change the language and restart the app by the following function:

_onDirectionChange = () => { I18nManager.forceRTL(true); // Immediately reload the React Native Bundle RNRestart.Restart(); }

推荐答案

然而，fandro 的答案是一个很好的答案，但在以下链接中有一个更直接的答案:更改 StackNavigator 顺序 #2683

However, fandro's answer is a good answer but there is a more straightforward answer in the following link:Change StackNavigator order #2683

路由器有一个名为 initialRouteName 的选项:

There is an Option for the router called initialRouteName :

const Navigator = StackNavigator({ Screen1: { screen: Screen1 }, Screen2: { screen: Screen2 }, Screen3: { screen: Screen3 } },{ initialRouteName: RTL ? 'Screen2' : 'Screen1', });

更新:完整解决方案:

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