图标在反应原生纸质文本输入中不起作用

Question

代码

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

输出

如何在React原生纸质文本输入中添加图标？

Answer 1

在 TextInput 中添加 secureTextEntry 和更多图标 - https://pictogrammers.com/library/mdi/

<TextInput
      label="Password"
      secureTextEntry
      right={<TextInput.Icon icon="eye" />}
    />

Answer 2

您需要使用 icon 属性而不是名称。

你的例子

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

正确的做法：

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

如果你想知道可以使用什么值，这里是来源：

https://callstack.github.io/react-native-paper/docs/guides/icons/

我希望这有帮助:)