Как использовать React Native AsyncStorage

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

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

Полный код этого руководства можно найти в этом репозитории GitHub.

Установка модуля сообщества

React Native версии 0.60.0+ имеет множество модулей API, доступных в виде отдельных пакетов, которые вы можете легко установить с помощью менеджера пакетов, такого как npm или yarn. Эти пакеты управляются членами сообщества, а также разработчиками с открытым исходным кодом.

Для начала давайте создадим новый проект React Native и установим модуль: @react-native-async-storage/async-storage. В окне терминала выполните следующие команды в указанном порядке.

# create a new react-native app
npx react-native init rnAsyncStorageExample

# navigate inside the project directory
cd rnAsyncStorageExample

# install the async-storage module
yarn add @react-native-async-storage/async-storage

# Or is you prefer to use npm
npm install @react-native-async-storage/async-storage
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы используете последнюю версию React Native (0.60.x или выше), вам не нужно вручную связывать нативные двоичные файлы для платформ iOS и Android. Это связывание модуля выполняется автоматически с помощью CLI. Правда, для iOS вам придется установить cocoapods. Вернитесь в окно терминала и выполните следующую команду:

npx pod-install ios
Войти в полноэкранный режим Выйти из полноэкранного режима

Это все, что касается настройки модуля AsyncStorage для работы в приложении React Native.

Изменение ограничения хранилища по умолчанию на Android

На устройствах iOS хранилище AsyncStorage не ограничивается программно.

На устройствах Android по умолчанию текущий размер AsyncStorage установлен на 6MB. Достижение этого предела приведет к ошибкам, например, к переполнению базы данных или диска. Есть веские причины, по которым этот лимит существует, но если есть необходимость увеличить размер, вы можете это сделать. Откройте файл android/gradle.properties и добавьте следующее:

AsyncStorage_db_size_in_MB=10
Войти в полноэкранный режим Выйти из полноэкранного режима

Этот файл представляет собой любые настройки проекта, которые вы можете использовать, чтобы отменить значения или настройки по умолчанию.

Теперь, чтобы убедиться, что все работает правильно, создайте приложение для Android (и убедитесь, что устройство Android или эмулятор запущены перед выполнением команды ниже).

npx react-native run-android
Вход в полноэкранный режим Выйдите из полноэкранного режима

Вы получите экран по умолчанию, подтверждающий, что приложение настроено.

Аналогично, чтобы создать приложение для iOS, выполните приведенную ниже команду:

npx react-native run-ios
Войти в полноэкранный режим Выйти из полноэкранного режима

Использование API AsyncStorage

Давайте начнем создавать пример. В этом примере приложения вы будете сохранять значение из пользовательского ввода в хранилище и получать значение из хранилища. Чтение и запись данных будут осуществляться с помощью функций AsyncStorage API.

Откройте файл App.js и начните с импорта следующих компонентов.

import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
Вход в полноэкранный режим Выход из полноэкранного режима

Далее определите переменную STORAGE_KEY. Она используется для чтения и сохранения данных. Вы можете считать этот ключ идентификатором хранимого значения, отсюда и система хранения «ключ-значение». Поскольку в данный момент вы собираетесь хранить только одно значение, требуется только один ключ.

let STORAGE_KEY = '@user_input';
Вход в полноэкранный режим Выход из полноэкранного режима

Внутри функционального компонента App определите переменную состояния input, которая по умолчанию имеет значение пустой строки.

const App = () => {
  const [input, setInput] = useState('');
  // ...
};

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Сохранение данных

Чтобы сохранить данные для чтения приложением, давайте определим асинхронный вспомогательный метод saveData. Этот метод будет основан на обещаниях, что означает, что вы можете использовать синтаксис async await с блоком try-catch.

Передав идентификатор STORAGE_KEY, а также переменную состояния input, метод API AsyncStorage.setItem сохранит значение в хранилище.

Давайте обновим состояние, а также выведем окно оповещения, когда данные будут успешно сохранены.

const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Чтение данных

Когда приложение перезапустится, оно должно иметь возможность прочитать данные, сохраненные в предыдущем разделе. Для этого создайте еще одну вспомогательную функцию readData, которая будет асинхронной. Эта функция будет считывать значение из хранилища с помощью метода API AsyncStorage.getItem и будет устанавливать значение переменной состояния input только тогда, когда ее значение не будет null.

const readData = async () => {
  try {
    const value = await AsyncStorage.getItem(STORAGE_KEY);

    if (value !== null) {
      setInput(value);
    }
  } catch (e) {
    alert('Failed to fetch the input from storage');
  }
};
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы получать данные при каждом запуске приложения, вызовите этот метод внутри хука useEffect.

useEffect(() => {
  readData();
}, []);
Вход в полноэкранный режим Выход из полноэкранного режима

Очистка всего хранилища

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

Если вы хотите удалить только определенный элемент из хранилища, существуют другие методы, такие как removeItem или multiRemove от AsyncStorage API.

Добавьте следующий фрагмент:

const clearStorage = async () => {
  try {
    await AsyncStorage.clear();
    alert('Storage successfully cleared!');
  } catch (e) {
    alert('Failed to clear the async storage.');
  }
};
Вход в полноэкранный режим Выход из полноэкранного режима

Управление вводом

Последние две вспомогательные функции, которые необходимы этому примеру приложения, это onChangeText и onSubmitEditing.

Эти методы будут отвечать за чтение ввода и обновление переменной состояния, а также за сохранение ввода.

const onChangeText = value => setInput(value);

const onSubmitEditing = () => {
  if (!input) return;

  saveData(input);
  setInput('');
};
Вход в полноэкранный режим Выход из полноэкранного режима

Завершение работы приложения

Мы определили все вспомогательные функции, которые необходимы приложению. Давайте завершим оператор return, определив JSX, как показано ниже:

const App = () => {
  // ... rest of the code remains the same

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>AsyncStorage React Native</Text>
      </View>
      <View style={styles.panel}>
        <Text style={styles.label}>Enter your input here:</Text>
        <TextInput
          style={styles.inputField}
          value={input}
          placeholder="Enter"
          onChangeText={onChangeText}
          onSubmitEditing={onSubmitEditing}
        />
        <Text style={styles.text}>Your input is {input}</Text>
        <Pressable onPress={clearStorage} style={styles.button}>
          <Text style={styles.buttonText}>Clear Storage</Text>
        </Pressable>
      </View>
    </View>
  );
};
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот стили, соответствующие приведенному выше фрагменту кода:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    width: '100%',
    backgroundColor: '#dcdcdc',
    paddingTop: 48,
    paddingBottom: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
  },
  title: {
    fontSize: 22,
    color: '#333',
    fontWeight: 'bold',
  },
  panel: {
    paddingTop: 10,
    paddingHorizontal: 10,
  },
  label: {
    fontSize: 20,
  },
  text: {
    fontSize: 24,
    paddingTop: 10,
  },
  inputField: {
    backgroundColor: '#fff',
    height: 44,
    borderWidth: 1,
    borderColor: '#333',
    width: '100%',
    padding: 10,
    marginTop: 12,
  },
  button: {
    margin: 10,
    padding: 10,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 18,
    color: '#444',
  },
});
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь вернитесь в симулятор iOS, и вас встретит следующий экран:

Далее введите значение, закройте приложение, а затем откройте его, чтобы посмотреть, сохранилось ли значение или нет.

И наконец, посмотрите, что произойдет, если вы нажмете на кнопку «Очистить хранилище».

Заключение

Поздравляю! Я надеюсь, что в этом руководстве вы изучили основные методы использования API AsyncStorage в вашем приложении React Native. Несмотря на то, что демонстрационное приложение было минимальным, оно позволило нам понять концепции.

Вот ссылка на полный API модуля AsyncStorage, к которому вы можете обратиться для дальнейшего чтения.

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

Оцените статью
Procodings.ru
Добавить комментарий