如何在反应原生应用程序中检测应用程序首次启动？

Question

In my scenario, I am having three different screens like Page1 , Page2 , Page3 . Here, if the user last visited page 2 then next time if user open application, instead of showing page1 need to show page2. How to achieve this using a react-native application?

I tried by using async storage but don't know how to manage multiple pages

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

App.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

You should use AsyncStorage to store the current screen, so any time you move from a screen to another you should call

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

and in App.js you should call

AsyncStorage.getItem('screen');

and affect it to initialRouteName

PS: getItem() is asynchronous.

Answer 2

Create another page say "Decider.js" and also import createSwitchNavigator from react-navigation. and make it your default page every time app launches. and there we will check where was the user last time and navigate to that page. Let achieve this as below:

App.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',
    }
));

Now on every app launch first screen called will be Decider.js

Decide.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>
        );
    }
}

**On every page's (FirstPage,SecondPage,ThirdPage) componentDidMount **

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

Hope it will solve your problem.

NOTE : Here we have used createSwitchNavigator to prevent going back to Decider.js once you reach any of the FirstPage, SecondPage or ThirdPage.