重新启动时反应本机导航 [英] React Native Navigation on Restart

问题描述

我正在使用 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();
  };

这篇关于重新启动时反应本机导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！