【掌握React Native，轻松实现本地存储】一步到位的集成指南

引言

在挪动利用开辟中，数据当地存储是弗成或缺的一环。React Native 作为一款风行的跨平台挪动利用开辟框架，供给了多种数据存储打算。本文将具体介绍如何在 React Native 利用中实现当地存储，包含 AsyncStorage、SQLite 跟 Realm 等方法，并给出一步到位的集成指南。

AsyncStorage 简介

AsyncStorage 是 React Native 官方推荐的数据存储方法，它是一个简单的、异步的、长久化的 key-value 存储体系。类似于 Android 中的 SharedPreferences 跟 iOS 中的 NSUserDefaults，AsyncStorage 以键值对的情势存储数据，实用于存储轻量级数据。

安装 AsyncStorage

npm install @react-native-async-storage/async-storage
npx pod-install  # 假如是 Mac 体系，须要履行此命令

利用 AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储数据
async function storeData(key, value) {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    // Error saving data
  }
}

// 获取数据
async function getData(key) {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      return value;
    }
  } catch (error) {
    // Error retrieving data
  }
}

SQLite

SQLite 是一种轻型的数据库，实用于挪动端开辟。在 React Native 中，可能利用 react-native-sqlite-storage 库来实现 SQLite 数据库操纵。

安装 SQLite

npm install react-native-sqlite-storage

利用 SQLite

import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase(
  {
    name: 'test.db',
    location: 'default',
  },
  () => {
    console.log('SQLite open database');
  },
  error => {
    console.log(error);
  }
);

// 创建表
db.execute(
  'CREATE TABLE IF NOT EXISTS test (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)',
  [],
  (err) => {
    if (err) {
      console.log('SQL error: ', err);
    } else {
      console.log('Table created successfully');
    }
  }
);

// 拔出数据
db.execute(
  'INSERT INTO test (name) VALUES (?)',
  ['John Doe'],
  (err) => {
    if (err) {
      console.log('SQL error: ', err);
    } else {
      console.log('Data inserted successfully');
    }
  }
);

Realm

Realm 是一种新兴的挪动端数据存储方法，它利用简单、跨平台、机能优胜。在 React Native 中，可能利用 realm 库来实现 Realm 数据库操纵。

安装 Realm

npm install realm

利用 Realm

import Realm from 'realm';

const schema = {
  name: 'Person',
  properties: {
    id: 'int',
    name: 'string',
  },
};

const realm = new Realm({ schema });

// 增加数据
const person = realm.create('Person', { id: 1, name: 'John Doe' });

// 查询数据
const people = realm.objects('Person');
console.log(people);

总结

本文介绍了 React Native 中常用的当地存储方法，包含 AsyncStorage、SQLite 跟 Realm。经由过程以上方法，开辟者可能轻松实现挪动利用的数据当地存储须要。盼望本文能帮助你更好地控制 React Native 数据存储技巧。