javascript - React-native:重新加载应用程序时，用户必须保持登录状态

Question

我有一个登录页面，当我单击登录按钮时，它会将我带到我创建的演示页面。我正在尝试使用AsyncStorage，这样当我在演示页面上重新加载应用程序时，它不应该返回到登录页面，它必须保留在演示页面本身上。

这是我使用AsyncStorage的演示页面:

'use strict';
var React = require('react-native');
var {
    AsyncStorage,
    StyleSheet,
    Text,
    View,
} = React;
var NavigationBar = require('react-native-navbar');
var Demo = React.createClass({

    getData: function()
    {
        AsyncStorage.getItem("isLogin").then((yes)=>{
            this.setState({"isLogin":yes});
        }).done();
    },

    storeData: function(yes)
    {
        AsyncStorage.setItem("isLogin", yes);
        this.setState({"isLogin":yes});
    },

    render: function()
    {
        let context = this;
        var leftButtonConfig = {
          title: 'Logout',
          handler: function onNext() {
            context.props.navigator.pop();
          }
        };

        var titleConfig = {
          title: 'Hello world page!',
        };
        return(
            <View style={{ flex: 1, }}>
      <NavigationBar
        title={titleConfig}
        leftButton={leftButtonConfig}
        style={{borderBottomWidth: 1 / React.PixelRatio.get(), borderBottomColor: 'rgba(0, 0, 0, 0.5)',}} />

            <View style={styles.container}>
        <Text style={styles.header}>
        Hello World
        </Text>
        </View>
        </View>
        );
    }
});
var styles = StyleSheet.create({
    container: {
        flex:1
    },
    header: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
    }
});

module.exports = Demo;

如何调用此 AsyncStorage？

Answer 1

如果你用ES6风格编写React组件，你可以在构造函数中调用getData，它肯定会在第一次渲染内容之前被调用。

import React, {Component} from 'react';

class Demo extends Component {
    constructor(props) {
        super(props);
        getData();
    }
    getData(){
        AsyncStorage.getItem("isLogin").then((yes)=>{
            this.setState({"isLogin":yes});
        }).done();
    }
    render() {
        return (...);
    }
}

export default Demo; 

下面这篇文章详细介绍了如何以 ES6 风格编写 React 类。

https://toddmotto.com/react-create-class-versus-component/