Expo驱动React Native应用公共变量存储方案及报错解决

首先，咱们先解决你遇到的「undefined is not an object」错误——问题出在导入方式和导出方式不匹配上：

你的Vars.js用的是export default导出一个对象，但在AppNavigator.js里你用了import * as Vars来导入。这种导入方式会把所有命名导出的内容打包成一个对象，而默认导出的内容会被放在这个对象的default属性里。也就是说你现在要访问的话得写Vars.default.colors.primary，这显然不是你想要的。

修复你的现有代码 #

只需要把导入语句改成默认导入就行：

// AppNavigator.js
import Vars from 'app/vars/Vars';

这样就能正常访问Vars.colors.primary了。

Expo React Native中存储公共变量的首选方式 #

根据场景不同，有几种常用方案：

1. 基础常量文件（最适合你的场景）

这是最直接简单的方式，适合存储颜色、字体、尺寸这类静态常量，就像你现在尝试的一样，但可以优化写法让结构更清晰：

// app/vars/constants.js
export const COLORS = {
  white: '#FFFFFF',
  black: '#000000',
  primary: '#0b457e',
  tabIconDefault: '#000000',
  tabIconSelected: '#0b457e'
};

export const FONTS = {
  normal: 'OpenSans-Regular',
  bold: 'OpenSans-Bold'
};

export const DIMENSIONS = {
  radius: 5,
  iconSize: 24
};

导入的时候可以按需导入，更灵活：

import { COLORS, DIMENSIONS } from 'app/vars/constants';

// 使用示例
backgroundColor: COLORS.white,
iconSize: DIMENSIONS.iconSize

2. 使用React Context（适合需要全局状态的场景）

如果你的变量需要在应用运行中动态改变，或者需要跨多层组件传递，React Context会更合适。比如主题切换（亮色/暗色模式）：

// app/context/ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState({
    colors: {
      primary: '#0b457e',
      white: '#FFFFFF'
    }
  });

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

然后在App.js里包裹Provider，组件里用useTheme钩子访问：

// 组件中使用
const { theme } = useTheme();
console.log(theme.colors.primary);

3. 使用环境变量（敏感配置）

如果是API地址、密钥这类敏感或环境相关的变量，可以用Expo的环境变量支持。在项目根目录创建.env文件：

API_URL=https://your-api.com
API_KEY=your-secret-key

然后用expo-constants来读取：

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig.extra.apiUrl;

总结一下，如果你只是存储静态的样式常量，第一种基础常量文件的方式是首选，简单高效；如果需要动态全局状态，就用Context；敏感配置用环境变量。

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