26、React Native 离线数据存储与 NativeBase UI 组件使用

React Native 离线数据存储与 NativeBase UI 组件使用

1. React Native 离线数据同步

在 React Native 应用中，当设备离线时，应用无法与远程 API 通信，此时将数据存储在本地是很有必要的。同时，我们需要检测网络状态的变化，以便在设备重新联网时同步应用状态。

1.1 同步应用数据

我们可以实现一个简化的 React Native 应用来演示如何在本地存储和网络端点之间同步数据。首先，创建一个 store.js 模块，该模块位于 React 组件和存储数据的网络调用之间：

import { AsyncStorage } from "react-native";
import NetInfo from "@react-native-community/netinfo";
const fakeNetworkData = {
  first: false,
  second: false,
  third: false
};
let connected = false;
const unsynced = [];
export function set(key, value) {
  return new Promise((resolve, reject) => {
    if (connected) {
      fakeNetworkData[key] = value;
      resolve(true);
    } else {
      AsyncStorage.setItem(key, v