网络与数据持久化

RN 网络请求与 Web 的差异

React Native 内置了 fetch API（与浏览器 fetch 相同），也支持 Axios。与 Web 开发最大的不同是：没有 CORS 限制。原生 App 发出的网络请求不受同源策略约束，这既是方便之处，也意味着你需要在服务端做好权限验证。

另一个差异是证书验证。RN 会严格验证 HTTPS 证书，自签名证书需要额外配置才能在真机上使用。开发环境推荐用 mkcert 生成受信任的本地证书。

还有网络状态问题：手机用户经常在 WiFi 和移动网络之间切换，甚至进入无信号区域。一个好的移动应用必须优雅处理网络中断场景，这是 Web 开发较少面对的挑战。

核心名词解释

请求链路架构

Axios 封装

// lib/api.ts — Axios 实例封装
import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
import { useAuthStore } from '../store/authStore';
import { MMKV } from 'react-native-mmkv';

export const storage = new MMKV();

export const api = axios.create({
  baseURL: 'https://api.myapp.com/v1',
  timeout: 10000,   // 10秒超时
  headers: { 'Content-Type': 'application/json' },
});

// 请求拦截器：自动附加 Token
api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = useAuthStore.getState().token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：统一错误处理 + Token 刷新
api.interceptors.response.use(
  response => response.data, // 自动解包 data
  async (error: AxiosError) => {
    const status = error.response?.status;

    if (status === 401) {
      // Token 过期，尝试刷新
      try {
        const refreshToken = storage.getString('refreshToken');
        const { token } = await api.post('/auth/refresh', { refreshToken });
        useAuthStore.getState().setToken(token);
        // 重试原始请求
        return api(error.config!);
      } catch {
        useAuthStore.getState().logout();
      }
    }

    return Promise.reject(error);
  }
);

AsyncStorage vs MMKV

AsyncStorage 是 RN 官方的本地存储方案，但它有明显的性能缺陷：所有操作都是异步的，且存储格式为纯文本 JSON，大数据量时解析开销显著。

MMKV 是微信团队开源的高性能方案，已被 React Native 社区广泛采用。它基于内存映射文件（mmap），读写都在内存中完成，速度极快，且支持同步操作（不需要 async/await）。

// AsyncStorage — 异步，慢
import AsyncStorage from '@react-native-async-storage/async-storage';

await AsyncStorage.setItem('theme', 'dark');
const theme = await AsyncStorage.getItem('theme');

// MMKV — 同步，快 30x
import { MMKV } from 'react-native-mmkv';
const storage = new MMKV();

storage.set('theme', 'dark');              // 同步！无需 await
const theme = storage.getString('theme'); // 同步！
storage.set('count', 42);                  // 支持 number 直接存储
const count = storage.getNumber('count'); // 100

// 多实例（不同命名空间）
const userStorage = new MMKV({ id: 'user' });
const cacheStorage = new MMKV({ id: 'cache' });

图片缓存与离线优先

// expo-image：官方推荐，内置磁盘/内存缓存
import { Image } from 'expo-image';

const blurhash = '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[';

export function CachedImage({ uri }: { uri: string }) {
  return (
    <Image
      source={{ uri }}
      style={{ width: 300, height: 200 }}
      placeholder={blurhash}             // 模糊占位（加载前显示）
      contentFit="cover"
      transition={300}                   // 淡入过渡动画
      cachePolicy="memory-disk"         // 内存+磁盘双缓存
    />
  );
}