Статьи

Сохранение данных в вашем мобильном приложении React

Октябрь 11, 2017

Итак, вы  немного возитесь с  React Native, как и я. Если вы похожи на меня, то вы готовы взглянуть на сохранение и загрузку данных в своем мобильном приложении.

Ранее я уже демонстрировал  сохранение данных с помощью Ionic Framework , поэтому цели, которыми я собираюсь поделиться, будут очень похожи. Мы собираемся сосредоточиться на AsyncStorage классе React Native,  чтобы выполнить то, что нам нужно.

Небольшой отказ от ответственности здесь. На момент написания React Native в основном работал только для iOS, поэтому вам понадобится Mac для того, чтобы перейти к тому, что в этой статье.

После этого откройте свой терминал и выполните следующую команду, чтобы запустить новый проект React Native:

react-native init ReactProject

Мы не будем использовать какие-либо внешние компоненты в этом руководстве, поэтому на данный момент мы готовы начать кодирование.

Согласно  документации React Native , рекомендуемый способ сохранения данных — через  AsyncStorage класс. Если вы знакомы с локальным хранилищем HTML5, вы поймете, что они очень похожи по своим функциям.

AsyncStorage использует пары ключ-значение, поэтому для сохранения данных вы можете сделать что-то вроде этого:

AsyncStorage.setItem("myKey", "My value here");

Если вы хотите получить сохраненные данные, вы можете выполнить поиск на основе значения ключа. Это асинхронная операция, которая выглядит следующим образом:

AsyncStorage.getItem("myKey").then((value) => {
    this.setState({"myKey": value});
}).done();

getItem Метод возвращает обещание , потому что это, конечно , асинхронный.

Имея это в виду, откройте  файл index.ios.js вашего проекта и  включите следующий код:

"use strict";
 
var React = require("react-native");
 
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    AsyncStorage,
} = React;
 
var ReactProject = React.createClass({
 
    componentDidMount: function() {
        AsyncStorage.getItem("myKey").then((value) => {
            this.setState({"myKey": value});
        }).done();
    },
 
    getInitialState: function() {
        return { };
    },
 
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.myKey}
                </Text>
                <View>
                    <TextInput
                        style={styles.formInput}
                        onChangeText={(text) => this.saveData(text)}
                        value="" />
                </View>
                <Text style={styles.instructions}>
                    Type something into the text box.  It will be saved to
                    device storage.  Next time you open the application, the saved data
                    will still exist.
                </Text>
            </View>
        );
    },
 
    saveData: function(value) {
        AsyncStorage.setItem("myKey", value);
        this.setState({"myKey": value});
    }
 
});
 
var styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        justifyContent: "center",
        alignItems: "stretch",
        backgroundColor: "#F5FCFF",
    },
    formInput: {
        flex: 1,
        height: 26,
        fontSize: 13,
        borderWidth: 1,
        borderColor: "#555555",
    },
    saved: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
        marginTop: 5,
    },
});
 
AppRegistry.registerComponent('ReactProject', () => ReactProject);

Давайте разберемся, что делает приведенный выше код.

componentDidMount: function() {
    AsyncStorage.getItem("myKey").then((value) => {
        this.setState({"myKey": value});
    }).done();
}

When the application loads, the componentDidMount function will be called.  We are going to load whatever data was saved and set the state when it is complete.

<Text style={styles.saved}>
    {this.state.myKey}
</Text>
<View>
    <TextInput
        style={styles.formInput}
        onChangeText={(text) => this.saveData(text)}
        value="" />
</View>

The above rendered items are for displaying what was saved and for saving new user inputted data.  When the user enters text, the saveData function is called saving everything the user gives us.

Finally we have the saveData function:

saveData: function(value) {
    AsyncStorage.setItem("myKey", value);
    this.setState({"myKey": value});
}

The above function will save the input to storage and then immediately set the state so it can be displayed on the screen.  I won’t go over the styling code that was included because it doesn’t advance the purpose of this article.

Go ahead and try it out.  Save some data, quit the application, then re-open it.  Is your data still there?

Conclusion

Although you could use HTML5 local storage, Facebook has created a more optimized method of storing data in React Native through the AsyncStorage class.

A video version of this article can be seen below.

38
Share: