React Native Paper TextInput图标失效，如何正确添加输入框图标？

以下是针对图标不显示问题的排查和解决步骤：

1. 确保依赖安装完整 #

React Native Paper的TextInput内置图标依赖react-native-vector-icons库，首先确认已安装：

# npm
npm install react-native-vector-icons

# yarn
yarn add react-native-vector-icons

React Native 0.60+版本会自动完成链接，无需手动操作。

2. 修正图标配置 #

方法一：使用内置TextInput.Icon #

给图标指定明确颜色（避免与背景色#eee重合导致不可见），同时确认图标名称匹配Material Icons官方命名：

<TextInput
    mode="outlined"
    label="Enter Password"
    outlineColor="#000"
    activeOutlineColor="#0073D9"
    right={<TextInput.Icon name="eye" color="#000" />}
    style={{
        backgroundColor: '#eee', 
        marginHorizontal: scale(20),
    }}
    value={Pass}
    onChangeText={(text) => setPass(text)}
/>

方法二：使用自定义图标组件 #

如果内置方式仍有问题，可直接引入react-native-vector-icons的Icon组件：

import Icon from 'react-native-vector-icons/MaterialIcons';

// 省略其他代码
<TextInput
    mode="outlined"
    label="Enter Password"
    outlineColor="#000"
    activeOutlineColor="#0073D9"
    right={
        <Icon 
            name="eye" 
            size={24} 
            color="#000" 
            style={{ marginRight: 12 }} 
        />
    }
    style={{
        backgroundColor: '#eee', 
        marginHorizontal: scale(20),
    }}
    value={Pass}
    onChangeText={(text) => setPass(text)}
/>

3. 常见问题排查 #

• 图标名称错误：核对Material Icons官网的图标名称，确保拼写无误（比如"eye"是正确命名，"eyes"不存在）。
• 样式遮挡：检查输入框的backgroundColor是否覆盖图标，可尝试调整输入框的padding或图标的层级。
• 图标库未链接：低版本React Native需手动执行react-native link react-native-vector-icons完成链接。

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