Expo托管项目修改@react-native-community/datetimepicker强调色

问题描述 #

我正在开发基于Expo SDK49的托管项目，使用@react-native-community/datetimepicker实现日期选择器，代码如下：

import { View } from "react-native";
import RNDateTimePicker from "@react-native-community/datetimepicker";

const DatePickerTest = () => {
  const value = new Date();
  return (
    <View style={{flex: 1}}>
      <RNDateTimePicker
        mode="date"
        value={value}
      />
    </View>
  );
};

export default DatePickerTest;

在Android设备上运行时，日期选择器的头部和选中颜色继承了系统默认主题色（我的设备上为绿色）。我知道原生项目可以通过修改android/app/src/main/res/values/styles.xml来调整强调色，但Expo托管项目无法直接访问Android原生目录，请问无需eject的情况下如何修改该颜色？

解决方案 #

无需eject Expo，可通过Expo配置文件直接定义Android主题颜色，具体步骤如下：

1. 安装expo-build-properties插件（可选但推荐） #

该插件帮助更灵活地配置Android构建属性，执行安装命令：

npx expo install expo-build-properties

2. 在app.json或app.config.js中配置主题颜色 #

在Expo配置文件中添加Android主题和颜色资源配置，覆盖默认的强调色：

{
  "expo": {
    // 其他原有配置...
    "android": {
      // 其他原有Android配置...
      "colorResources": {
        "colorPrimary": "#FF5722", // 替换为你需要的主色
        "colorAccent": "#FF5722"   // 替换为你需要的强调色（日期选择器会使用这个颜色）
      },
      "styles": {
        "AppTheme": {
          "parent": "Theme.AppCompat.Light.NoActionBar",
          "item": {
            "colorPrimary": "@color/colorPrimary",
            "colorAccent": "@color/colorAccent"
          }
        }
      }
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "theme": "@style/AppTheme"
          }
        }
      ]
    ]
  }
}

3. 重新构建项目 #

配置完成后，需要重新构建Android项目才能生效：

• 若使用EAS Build：执行eas build -p android
• 若使用本地构建：执行npx expo prebuild --clean && npx expo run:android

这样配置后，@react-native-community/datetimepicker的头部和选中状态颜色就会替换为你指定的颜色。

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