Question

在我的场景中，我有三个不同的屏幕，例如Page1，Page2，Page3。在这里，如果用户上次访问了页面2，则下次用户打开应用程序时，无需显示page1，而需要显示page2。如何使用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})

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

您应该使用AsyncStorage来存储当前屏幕，因此，每次从一个屏幕移动到另一个屏幕时，都应该调用

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

在App.js中，您应该调用

AsyncStorage.getItem('screen');

并将其影响到initialRouteName

PS：getItem（）是异步的。

Answer 2

创建另一个页面，例如“ Decider.js”，并从react-navigation导入createSwitchNavigator。并在每次启动应用程序时将其设置为默认页面。然后我们将检查用户上次在哪里，并导航到该页面。让我们实现如下：

App.js

NSApplication.shared.activate(ignoringOtherApps: true)

现在，在每个应用程序启动的第一个屏幕上，名为Decider.js

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

**在每个页面的（FirstPage，SecondPage，ThirdPage）componentDidMount **

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

希望它能解决您的问题。

注意：这里，我们使用... componentDidMount(){ AsyncStorage.setItem("alreadyLaunchedPage","FirstPage")//if FirstPage // AsyncStorage.setItem("alreadyLaunchedPage","SecondPage")//if SecondPage // AsyncStorage.setItem("alreadyLaunchedPage","ThirdPage")//if ThirdPage } ...来防止一旦您到达FirstPage，SecondPage或ThirdPage中的任何一个都返回到createSwitchNavigator。

如何在React Native App中检测到应用程序首次启动？

2 个答案: