React Native 全栈开发实战班 - 本地存储实现

🕗 发布于 2024-11-15 07:16 react native jvm react.js

在移动应用中，本地存储 是实现数据持久化的重要手段。React Native 提供了多种本地存储方案，包括异步存储（AsyncStorage）、SQLite 数据库以及其他第三方库。本章节将介绍如何使用 AsyncStorage 进行简单的键值对存储，以及如何使用 SQLite 进行更复杂的数据存储需求。

5.1 本地存储概述

本地存储 允许应用在设备上保存数据，即使应用关闭后数据仍然存在。常见的本地存储需求包括：

用户设置： 保存用户的偏好设置，如主题、语言等。
缓存数据： 缓存从服务器获取的数据，提高应用性能。
离线数据： 保存用户输入的数据，以便在离线时使用。

React Native 提供了多种本地存储方案：

AsyncStorage： 简单的异步键值对存储，适用于存储少量数据。
SQLite： 轻量级的关系型数据库，适用于存储结构化数据。
第三方库： 如 RealmDB、MobX 等，适用于更复杂的数据存储需求。

本章节将重点介绍 AsyncStorage 和 SQLite 的使用。

5.2 使用 AsyncStorage

AsyncStorage 是 React Native 提供的一个简单的异步键值对存储系统，适用于存储少量数据。

5.2.1 安装 AsyncStorage

对于 React Native 0.59 及以上版本，AsyncStorage 已经内置，无需额外安装。

对于 React Native 0.58 及以下版本，需要手动安装：

npm install @react-native-async-storage/async-storage

5.2.2 基本用法

设置数据：

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

const storeData = async (key, value) => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem(key, jsonValue);
  } catch (e) {
    console.error(e);
  }
};

获取数据：

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

const getData = async (key) => {
  try {
    const jsonValue = await AsyncStorage.getItem(key);
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    console.error(e);
    return null;
  }
};

删除数据：

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

const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (e) {
    console.error(e);
  }
};

示例：

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

export const storeUser = async (user) => {
  try {
    const jsonValue = JSON.stringify(user);
    await AsyncStorage.setItem('user', jsonValue);
  } catch (e) {
    console.error(e);
  }
};

export const getUser = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('user');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    console.error(e);
    return null;
  }
};

export const removeUser = async () => {
  try {
    await AsyncStorage.removeItem('user');
  } catch (e) {
    console.error(e);
  }
};

// UserManager.js
import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { storeUser, getUser, removeUser } from './store';

const UserManager = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const loadUser = async () => {
      const userData = await getUser();
      setUser(userData);
    };
    loadUser();
  }, []);

  const handleStore = async () => {
    const newUser = { name: '张三', age: 30 };
    await storeUser(newUser);
    setUser(newUser);
  };

  const handleRemove = async () => {
    await removeUser();
    setUser(null);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>User: {user ? user.name : 'None'}</Text>
      <Button title="Store User" onPress={handleStore} />
      <Button title="Remove User" onPress={handleRemove} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default UserManager;

解释：

storeUser 函数用于存储用户数据。
getUser 函数用于获取用户数据。
removeUser 函数用于删除用户数据。
UserManager 组件演示了如何使用这些函数来管理用户数据。

5.2.3 注意事项

数据大小限制： AsyncStorage 适用于存储少量数据，不适合存储大量数据。
性能： AsyncStorage 的性能不如 SQLite，不适合频繁读写操作。
安全性： AsyncStorage 不提供加密功能，敏感数据需要谨慎处理。

5.3 使用 SQLite

SQLite 是一个轻量级的关系型数据库，适用于存储结构化数据。React Native 可以通过第三方库（如 react-native-sqlite-storage）来使用 SQLite。

5.3.1 安装 SQLite

npm install react-native-sqlite-storage

5.3.2 基本用法

初始化数据库：

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

const db = SQLite.openDatabase(
  {
    name: 'mydb.db',
    location: 'default',
  },
  () => {
    console.log('Database opened');
  },
  (error) => {
    console.error(error);
  }
);

创建表：

const createTable = () => {
  db.transaction((tx) => {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER)',
      [],
      () => {
        console.log('Table created');
      },
      (error) => {
        console.error(error);
      }
    );
  });
};

插入数据：

const insertUser = (name, age) => {
  db.transaction((tx) => {
    tx.executeSql(
      'INSERT INTO users (name, age) VALUES (?, ?)',
      [name, age],
      (tx, results) => {
        if (results.rowsAffected > 0) {
          console.log('User inserted');
        } else {
          console.log('Insert failed');
        }
      },
      (error) => {
        console.error(error);
      }
    );
  });
};

查询数据：

const getUsers = () => {
  db.transaction((tx) => {
    tx.executeSql(
      'SELECT * FROM users',
      [],
      (tx, results) => {
        const rows = results.rows;
        for (let i = 0; i < rows.length; i++) {
          console.log(rows.item(i));
        }
      },
      (error) => {
        console.error(error);
      }
    );
  });
};

示例：

// SQLiteExample.js
import React, { useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import SQLite from 'react-native-sqlite-storage';

const SQLiteExample = () => {
  useEffect(() => {
    const db = SQLite.openDatabase(
      {
        name: 'mydb.db',
        location: 'default',
      },
      () => {
        console.log('Database opened');
        createTable();
      },
      (error) => {
        console.error(error);
      }
    );

    const createTable = () => {
      db.transaction((tx) => {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER)',
          [],
          () => {
            console.log('Table created');
          },
          (error) => {
            console.error(error);
          }
        );
      });
    };

    const insertUser = (name, age) => {
      db.transaction((tx) => {
        tx.executeSql(
          'INSERT INTO users (name, age) VALUES (?, ?)',
          [name, age],
          (tx, results) => {
            if (results.rowsAffected > 0) {
              console.log('User inserted');
            } else {
              console.log('Insert failed');
            }
          },
          (error) => {
            console.error(error);
          }
        );
      });
    };

    insertUser('李四', 25);
    insertUser('王五', 28);

    getUsers();

    return () => {
      db.close();
    };
  }, []);

  const getUsers = () => {
    db.transaction((tx) => {
      tx.executeSql(
        'SELECT * FROM users',
        [],
        (tx, results) => {
          const rows = results.rows;
          for (let i = 0; i < rows.length; i++) {
            console.log(rows.item(i));
          }
        },
        (error) => {
          console.error(error);
        }
      );
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>SQLite Example</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

export default SQLiteExample;

解释：

openDatabase 方法用于打开或创建数据库。
createTable 函数用于创建 users 表。
insertUser 函数用于插入用户数据。
getUsers 函数用于查询用户数据。

5.3.3 注意事项

性能： SQLite 适合存储大量数据，但不适合非常频繁的读写操作。
安全性： SQLite 不提供加密功能，敏感数据需要谨慎处理。
第三方库： 需要安装和配置第三方库，并处理原生模块的兼容性。

总结

本章节介绍了 React Native 中的本地存储方案，包括 AsyncStorage 和 SQLite 的使用。AsyncStorage 适用于存储少量数据，而 SQLite 适合存储结构化数据。通过合理选择本地存储方案，可以有效地实现数据持久化和离线功能。

课后作业

使用 AsyncStorage 实现一个简单的用户设置存储功能。
使用 SQLite 实现一个简单的用户信息管理应用。
阅读 AsyncStorage 和 SQLite 官方文档，深入了解其高级用法和最佳实践。

导师简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

原文地址：https://blog.csdn.net/bravekingzhang/article/details/143767646

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Brave127编译指南 Windows篇：部署Node.js（五）
下一篇：Python 数据可视化pilot

Nuxt.js 应用中的 schema：beforeWrite 事件钩子详解
钩子为开发者提供了一个灵活的接口，以便在写入 JSON Schema 之前进行必要的修改和验证。这使得开发者可以在构建过程中插入自定义逻辑，有助于提高应用的稳定性和准确性。钩子允许开发者在 JSON
阅读更多2024-11-17
Python习题 249：判断两个单词为相同字母异序词
（编码题）编写一个函数，判断两个单词（字符串）中有相同的单词（字符），即相同字母异序词。
阅读更多2024-11-17
第四章：ArkTS 语句全解：从基础到高级的控制流与异常处理
本文详细介绍了 ArkTS 中的多种语句，这些语句对于构建程序逻辑、控制执行流程和处理异常至关重要。
阅读更多2024-11-17
Vue.js中computed的使用方法
在Vue.js中，computed 属性是基于它们的依赖进行缓存的响应式属性。这意味着只要computed属性依赖的源数据（如data中的属性）没有发生变化，多次访问computed属性会立即返回之前
阅读更多2024-11-17
【团标】《软件造价评估实施规程》（T-BSCEA002—2023）-标准解读系列14
而对于软件造价业务开展过程中，基准数据以及相关调整因子的选取判定、评估工作开展具体步骤环节、造价输出成果要求（如造价清单、造价报告）等，《软件造价评估实施规程》（T-BSCEA002—2023）则提供
阅读更多2024-11-17
效益登记册&效益管理计划
-全生命周期会update。集商业论证、组织战略计划和其他相关项目集自标。定义管理效益所需的角色和职责;
阅读更多2024-11-17
我手搓了个“自动生成标书”的开源大模型工具
最近我写开源商业文章明显更新少了，不是我不写文章了，而是开源商业化进展很顺利，我写文章的时间都被各种写标书占满了。作为一个开源原生的商业公司，白鲸开源公司的员工几乎都是程序员，而让这些开源贡献者写标书
阅读更多2024-11-17
奥迪股份如何通过升级至SAP S/4HANA实现财务与后勤的高效整合？
为了避免成本高昂的临时解决方案，奥迪公司希望将所有工厂后勤（后勤和生产的一部分）同时迁移到SAP S/4HANA，并集成到生产模板“Progress”中。随着多个项目的筹备，奥迪股份公司在 2023
阅读更多2024-11-17
linux逻辑卷练习
从新硬盘制作三个分区每个分区都 3GB大小，将三个分区只作为物理卷，通过这三个物理卷创建卷组通过卷组生成一个逻辑卷，大小为7G，再将逻辑卷调整到10G。物理卷（physical volume）：简
阅读更多2024-11-17
Vagrant 没了 VirtualBox 的话可以配 Qemu
之前一直是用 Vagrant 搭配 VirtualBox 在 Mac 下使用 Linux 虚拟机，因为不需要用到 Linux 桌面，用 Vagrant 操作虚拟机非常方便。有些尚未听说过，还有一些虽说
阅读更多2024-11-17