React Native中非React模块如何访问React Context？

一、普通模块能否访问React Context？ #

不行。React Context是React组件树特有的机制，普通JS模块（非组件、非自定义Hook）不在组件树生命周期内，无法直接订阅或访问Context的值。Portals确实只针对Web DOM，React Native里完全用不上。

二、针对你的两个核心问题的解决方案 #

1. Axios客户端动态更新令牌（无需依赖Context访问） #

不用纠结让普通模块访问Context，换个更简洁的思路：

• 在Context里维护可修改的Axios单例实例，而非每次重新创建客户端
• 当令牌更新时，直接修改实例的默认请求头，所有后续请求会自动复用更新后的配置：

// AuthContext.js
import axios from 'axios';
import { useState, useEffect, createContext } from 'react';

// 全局创建一次Axios实例
const apiClient = axios.create({ baseURL: '你的接口域名' });

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [token, setToken] = useState(null);

  // 令牌更新时同步到Axios实例
  useEffect(() => {
    if (token) {
      apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
      delete apiClient.defaults.headers.common['Authorization'];
    }
  }, [token]);

  // 这里可以添加刷新令牌、登录登出等逻辑
  const refreshToken = async () => {
    // 刷新令牌逻辑，拿到新token后调用setToken
  };

  return (
    <AuthContext.Provider value={{ apiClient, token, setToken, refreshToken }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

• 所有需要发请求的组件/自定义Hook，直接通过useAuth()获取apiClient即可，令牌更新时会自动同步配置。

2. Expo-SQLite 数据库锁定问题 #

锁定通常是重复打开数据库连接或未正确处理事务导致的，解决方法：

• 用单例模式管理数据库实例，确保整个App只有一个数据库连接：

// db.js
import * as SQLite from 'expo-sqlite';

let dbInstance = null;

export const getDb = () => {
  if (!dbInstance) {
    dbInstance = SQLite.openDatabase('你的数据库名.db');
  }
  return dbInstance;
};

• 所有数据库操作都通过getDb()获取实例，避免重复打开连接
• 严格确保事务执行完成后正确提交/回滚，不要遗留未完成的事务：

// 示例事务操作
const db = getDb();
db.transaction(tx => {
  tx.executeSql(
    'INSERT INTO users (name) VALUES (?)',
    ['张三'],
    () => console.log('插入成功'),
    (_, error) => {
      console.error('插入失败:', error);
      return true; // 返回true触发事务回滚
    }
  );
});

• 应用重启时数据库连接会自动释放，单例模式能避免重启后重复创建连接导致的锁定。

三、替代方案（如果必须让普通模块获取Context值） #

如果确实需要普通JS模块拿到Context中的数据（比如令牌），可以用全局状态管理库（如Zustand、Redux），这类库的状态可以在任何模块中直接访问，无需依赖组件树：

// store.js
import { create } from 'zustand';
import axios from 'axios';

const apiClient = axios.create({ baseURL: '你的接口域名' });

export const useAuthStore = create((set, get) => ({
  token: null,
  apiClient,
  setToken: (newToken) => {
    set({ token: newToken });
    // 同步更新Axios请求头
    get().apiClient.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
  },
}));

• 普通模块中直接通过useAuthStore.getState().apiClient获取配置好的Axios实例，完全脱离组件树限制。

内容的提问来源于stack exchange，提问作者Archimedes Trajano