Как обнаружить первый запуск приложения в реагировать нативное приложение?

Question

В моем сценарии у меня есть три разных экрана, таких как Page1, Page2, Page3. Здесь, если пользователь в последний раз посетил страницу 2, то в следующий раз, если пользователь откроет приложение, вместо показа страницы 1 нужно показать страницу 2. Как добиться этого с помощью приложения react-native?

Я пытался использовать хранилище async, но не знаю, как управлять несколькими страницами

AsyncStorage.getItem("alreadyLaunched").then(value => {
            if(value == null){
                 AsyncStorage.setItem('alreadyLaunched', true); // No need to wait for `setItem` to finish, although you might want to handle errors
                 this.setState({firstLaunch: true});
            }
            else{
                 this.setState({firstLaunch: false});
            }}) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})

Приложение. js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';

//import all the screens we are going to switch 
const App = createStackNavigator({
   //Constant which holds all the screens like index of any book 
   FirstPage: { screen: FirstPage, header: null},
   SecondPage: { screen: SecondPage,  headerLeft: null, headerBackTitle: null}, 
   ThirdPage: { screen: ThirdPage}, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);
export default createAppContainer(App);

Answer 1

Вы должны использовать AsyncStorage для сохранения текущего экрана, поэтому каждый раз, когда вы переходите с экрана на другой, вы должны вызывать

AsyncStorage.setItem('screen', 'nameOfYourScreen')

, а в приложении. js вам следует звонить

* 1005. *

и привязать его к initialRouteName

PS: getItem () является асинхронным.

Answer 2

Создайте еще одну страницу, скажем «Decider. js», а также импортируйте createSwitchNavigator из реагирования-навигации. и сделать его страницей по умолчанию каждый раз, когда приложение запускается. и там мы проверим, где был пользователь в последний раз и перейдем к этой странице. Достигните этого, как показано ниже:

Приложение. js

import { createSwitchNavigator, createAppContainer } from 'react-navigation'; //new import createSwitchNavigator
import { createStackNavigator} from 'react-navigation-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';
import Deccider from './pages/Decider.js'; // New deciding screen

//import all the screens we are going to switch 
const App = createStackNavigator({
   //Constant which holds all the screens like index of any book 
   FirstPage: { screen: FirstPage, header: null},
   SecondPage: { screen: SecondPage,  headerLeft: null, headerBackTitle: null}, 
   ThirdPage: { screen: ThirdPage}, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);

export default createAppContainer(createSwitchNavigator(
    {
        AuthLoading: Decider,
        App: App,
    },
    {
        initialRouteName: 'AuthLoading',
    }
));

Теперь при каждом запуске приложения первым вызванным экраном будет Decider. js

Решите. js

import React from 'react';
import {
    AsyncStorage,
    View,
} from 'react-native';

export default class AuthLoadingScreen extends React.Component {
    constructor() {
        super();
        this._bootstrapAsync();
    }

    _bootstrapAsync = async () => {
        var alreadyLaunchedPage = await
            AsyncStorage.getItem('alreadyLaunchedPage');
        if (alreadyLaunchedPage) {
            this.props.navigation.navigate(alreadyLaunchedPage);
        } else {
            this.props.navigation.navigate('App');
        }

    };

    render() {
        return (
            <View style={{ flex: 1 }}>
                {/* Any Loading or splash design */}
            </View>
        );
    }
}

** На каждой странице (FirstPage, SecondPage, ThirdPage) componentDidMount **

...
componentDidMount(){
        AsyncStorage.setItem("alreadyLaunchedPage","FirstPage")//if FirstPage
     // AsyncStorage.setItem("alreadyLaunchedPage","SecondPage")//if SecondPage
     // AsyncStorage.setItem("alreadyLaunchedPage","ThirdPage")//if ThirdPage
    }
...

Надеюсь, что это будет решить вашу проблему.

ПРИМЕЧАНИЕ : Здесь мы использовали createSwitchNavigator, чтобы предотвратить возврат к Decider.js при достижении любой из FirstPage, SecondPage или ThirdPage.