如何修改带图标的React Native Paper TextInput背景色？

你遇到的问题是因为flat模式下，TextInput的右侧图标容器默认继承主题的textInputIcon颜色，而你设置的backgroundColor仅作用于输入文本区域，图标区域是独立的容器，所以需要单独处理它的背景色。以下是三种可行的解决方案：

方案1：自定义全局主题 #

通过修改react-native-paper的主题配置，统一设置TextInput图标容器的背景色，适合多个输入框的场景：

1. 导入主题相关组件：

import { Provider, DefaultTheme } from 'react-native-paper';

2. 创建自定义主题：

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    textInputIcon: 'white', // 将图标容器背景设为白色
  },
};

3. 用Provider包裹你的组件：

<Provider theme={customTheme}>
  {/* 你的TextInput组件放在这里 */}
</Provider>

方案2：直接修改图标样式 #

给TextInput.Icon添加backgroundColor样式，快速解决单个输入框的问题：

<TextInput
  // 其他属性保持不变
  right={
    <TextInput.Icon
      icon={showPassword ? 'eye' : 'eye-off'}
      size={25}
      onPress={() => setShowPassword(!showPassword)}
      style={{ backgroundColor: 'white', paddingHorizontal: 10, marginRight: -8 }}
    />
  }
/>

marginRight: -8是为了让图标容器和输入框边缘对齐，避免出现缝隙。

方案3：用View包裹图标 #

如果前两种方法不生效，可以将图标放在View中，通过View的样式控制背景色：

<TextInput
  // 其他属性保持不变
  right={
    <View style={{ backgroundColor: 'white', padding: 8 }}>
      <TextInput.Icon
        icon={showPassword ? 'eye' : 'eye-off'}
        size={25}
        onPress={() => setShowPassword(!showPassword)}
      />
    </View>
  }
/>

完整示例代码 #

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-paper';

const PasswordInput = () => {
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        mode="flat"
        autoCapitalize="none"
        secureTextEntry={!showPassword}
        label="Contraseña"
        value={password}
        backgroundColor="white"
        onChangeText={setPassword}
        textColor="black"
        underlineColor="rgb(102,102, 102)"
        activeUnderlineColor="rgb(102,102, 102)"
        right={
          <TextInput.Icon
            icon={showPassword ? 'eye' : 'eye-off'}
            size={25}
            onPress={() => setShowPassword(!showPassword)}
            style={{ backgroundColor: 'white', paddingHorizontal: 10, marginRight: -8 }}
          />
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
});

export default PasswordInput;

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