Question

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

Navigator类就像这样

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中的

我通过以下功能更改语言并重新启动应用程序：

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

Answer 1

也许您可以在移动设置中保存参数并根据它创建条件以在加载时加载正确的导航器：

代码如下：

const Navigator = IsRestarting() ? MyNewNavigator({}) : StackNavigator({});

其中IsRestarting()可以是在您要求应用程序重新启动后检查移动设备中的值存储的函数。例如，如果值为tru，则返回自定义导航器，否则返回默认值。

希望它有所帮助。

Answer 2

然而，fandro的答案是一个很好的答案，但在以下链接中有一个更简单的答案：Change StackNavigator order #2683

路由器有一个名为 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();
  };

在重新启动时反应本机导航

2 个答案: