【掌握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 數據存儲技巧。