React Native Expo积分交易APP全局数据存储方案咨询（替代localStorage）

一、Context API + Async Storage 组合方案（原生轻量） #

直接用React原生API结合持久化存储，不用额外依赖，适合你的积分APP场景，能实现全局实时数据共享，无需页面刷新。

实现步骤 #

• 创建全局AuthContext，封装Async Storage的读写逻辑，同时维护内存状态
• 在根组件用Provider包裹所有页面，让组件树都能访问数据
• 登录时同步更新内存状态和持久化存储
• 各页面通过自定义Hook快速获取实时数据

代码示例

1. 创建AuthContext.js

import { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [userData, setUserData] = useState(null);

  // 初始化APP时从本地加载数据
  useEffect(() => {
    const loadStoredData = async () => {
      try {
        const savedData = await AsyncStorage.getItem('userData');
        if (savedData) setUserData(JSON.parse(savedData));
      } catch (err) {
        console.error('加载用户数据失败:', err);
      }
    };
    loadStoredData();
  }, []);

  // 登录保存数据
  const login = async (data) => {
    try {
      await AsyncStorage.setItem('userData', JSON.stringify(data));
      setUserData(data);
    } catch (err) {
      console.error('保存用户数据失败:', err);
    }
  };

  // 登出清除数据
  const logout = async () => {
    try {
      await AsyncStorage.removeItem('userData');
      setUserData(null);
    } catch (err) {
      console.error('清除用户数据失败:', err);
    }
  };

  // 更新用户资料
  const updateProfile = async (newInfo) => {
    const updatedData = { ...userData, ...newInfo };
    try {
      await AsyncStorage.setItem('userData', JSON.stringify(updatedData));
      setUserData(updatedData);
    } catch (err) {
      console.error('更新用户资料失败:', err);
    }
  };

  return (
    <AuthContext.Provider value={{ userData, login, logout, updateProfile }}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义Hook简化调用
export const useAuth = () => useContext(AuthContext);

2. 根组件包裹（比如App.js）

import { AuthProvider } from './AuthContext';
import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './RootNavigator';

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

3. 登录页使用

import { useAuth } from './AuthContext';

const LoginScreen = () => {
  const { login } = useAuth();

  const handleLogin = async () => {
    // 调用登录API获取token、userId等数据
    const loginRes = await fetch('/api/login', { /* 请求配置 */ });
    // 保存并更新全局状态
    await login(loginRes.data);
    // 跳转到仪表盘
  };

  return (/* 登录UI */);
};

4. 交易详情页获取数据

import { useAuth } from './AuthContext';

const TransactionDetail = () => {
  const { userData } = useAuth();

  useEffect(() => {
    if (userData) {
      // 直接用全局数据调用详情API
      fetch(`/api/transaction/${userData.userId}`, {
        headers: { Authorization: `Bearer ${userData.token}` }
      });
    }
  }, [userData]);

  return (/* 交易详情UI */);
};

二、轻量状态管理：Zustand + 持久化 #

如果觉得Context嵌套麻烦，用Zustand更简洁，自带状态更新，配合持久化插件就能实现需求。

实现步骤 #

• 安装依赖：expo install zustand @react-native-async-storage/async-storage
• 创建带持久化的store
• 各页面直接调用store获取/修改数据

代码示例

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

const useAuthStore = create(
  persist(
    (set) => ({
      userData: null,
      login: (data) => set({ userData: data }),
      logout: () => set({ userData: null }),
      updateProfile: (newInfo) => set(state => ({
        userData: { ...state.userData, ...newInfo }
      }))
    }),
    {
      name: 'auth-store', // 本地存储的键名
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// 使用示例
// 登录页：useAuthStore.getState().login(loginRes.data)
// 详情页：const userData = useAuthStore(state => state.userData)

三、修复Tab与Stack Navigation嵌套崩溃问题 #

确保导航结构正确，常规做法是Tab作为根导航，每个Tab下嵌套Stack导航，避免路由参数传递冲突：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// 仪表盘嵌套Stack
const DashboardStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="DashboardHome" component={DashboardScreen} />
    <Stack.Screen name="TransactionDetail" component={TransactionDetail} />
  </Stack.Navigator>
);

// 个人资料嵌套Stack
const ProfileStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="ProfileHome" component={ProfileScreen} />
    <Stack.Screen name="EditProfile" component={EditProfileScreen} />
  </Stack.Navigator>
);

// 根导航
const RootNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Dashboard" component={DashboardStack} />
    <Tab.Screen name="Profile" component={ProfileStack} />
  </Tab.Navigator>
);

内容的提问来源于stack exchange，提问作者paul netia