我正在使用 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(); };更多推荐
重新启动时反应本机导航
发布评论