Expo管理的React Native项目APK导出后颜色异常问题排查

我有一个Expo管理的React Native项目，使用eas build生成APK并安装后，界面颜色与使用Expo Go预览时差异明显。我主要使用React Native Paper组件，想了解可能的原因。

相关配置文件 #

eas.json #

{
  "build": {
    "preview": {
      "developmentClient": true,
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease"
      }
    }
  }
}

package.json #

{
  "name": "mobile",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/material-top-tabs": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.8",
    "@tanstack/react-query": "^4.32.6",
    "@types/react": "~18.2.14",
    "base-64": "^1.0.0",
    "expo": "~49.0.7",
    "expo-file-system": "~15.4.4",
    "expo-image-picker": "~14.3.2",
    "expo-linear-gradient": "~12.3.0",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.1.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-paper": "^5.10.1",
    "react-native-root-toast": "^3.4.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-shadow-2": "^7.0.8",
    "react-native-svg": "13.9.0",
    "react-native-tab-view": "^3.5.2",
    "typescript": "^5.1.3",
    "react-native-pager-view": "6.2.0",
    "expo-av": "~13.4.1",
    "expo-dev-client": "~2.4.10",
    "@react-native-async-storage/async-storage": "1.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

对比截图 #

左：Expo Go预览效果，右：构建的APK效果

可能的原因排查方向 #

• 主题配置未正确应用到生产环境：React Native Paper的主题可能在开发环境中正常加载，但打包时因环境变量、配置文件差异导致主题未注入。检查是否存在仅在开发环境生效的主题配置逻辑，比如依赖__DEV__变量判断是否加载主题。
• 系统主题适配差异：Expo Go可能默认使用了固定的浅色/深色模式，而构建的APK会跟随设备系统主题切换，导致Paper组件自动调整颜色方案。可以在app.json中设置userInterfaceStyle为固定值，或在Paper的Provider中强制指定主题mode（light/dark）。
• 依赖版本不匹配：Expo Go运行的依赖版本和构建APK时的依赖版本可能存在细微差异，比如React Native Paper或Expo SDK的版本不一致，导致渲染样式偏差。尝试清理构建缓存后重新执行eas build，确保依赖完全同步。
• Release构建的代码优化影响：Release构建会开启ProGuard/R8代码压缩和优化，可能误移除了React Native Paper的样式相关代码。检查Gradle配置，确保Paper的类和样式资源未被混淆或删除。
• 颜色值格式不兼容：如果使用了非标准颜色格式（如十六进制简写#RGB或特殊的rgba写法），Expo Go可能兼容，但原生构建时解析异常。确保所有颜色值使用标准的#RRGGBB或rgba(r,g,b,a)格式。

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