如何在Expo中修改TextInput默认自动填充颜色？

iOS 端解决方案 #

可以通过给 TextInput 添加自定义样式，利用 WebKit 属性覆盖默认的黄色填充背景：

import { TextInput } from 'react-native';

<TextInput
  style={{
    // 用目标颜色（示例为白色）覆盖自动填充的黄色背景
    WebkitBoxShadow: '0 0 0 1000px #ffffff inset',
    // 可选：设置光标颜色，避免被阴影覆盖
    caretColor: '#000000',
  }}
  autoComplete="username" // 根据需求设置自动填充类型
  textContentType="username" // iOS 专属，指定内容类型
/>

这种方式通过内部阴影填充整个输入框区域，直接覆盖默认黄色背景，不会干扰输入框的其他样式。

Android 端解决方案 #

在 Expo 中无需 eject，可借助 expo-build-properties 插件修改 Android 主题配置：

1. 安装插件：

npx expo install expo-build-properties

2. 在 app.json 或 app.config.js 中配置插件，添加自定义主题属性：

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "styles": [
              {
                "name": "AppTheme",
                "parent": "Theme.AppCompat.Light.NoActionBar",
                "attributes": [
                  {
                    "name": "android:autofilledHighlight",
                    "value": "@android:color/transparent" // 设置为透明或自定义颜色
                  }
                ]
              }
            ]
          }
        }
      ]
    ]
  }
}

如果需要自定义颜色，可先配置 Android 颜色资源再引用：

{
  "expo": {
    "android": {
      "colorResources": {
        "custom_autofill_color": "#f0f0f0"
      }
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "styles": [
              {
                "name": "AppTheme",
                "parent": "Theme.AppCompat.Light.NoActionBar",
                "attributes": [
                  {
                    "name": "android:autofilledHighlight",
                    "value": "@color/custom_autofill_color"
                  }
                ]
              }
            ]
          }
        }
      ]
    ]
  }
}

3. 重新构建项目：

npx expo prebuild --platform android
# 或直接运行项目
npx expo run:android

通用注意事项 #

• 若仅需临时禁用自动填充，可设置 autoComplete="off" 和 textContentType="none"，但这不属于修改颜色的方案。
• 测试时需确保设备存有自动填充数据，才能看到样式修改效果。

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