我知道可以为TextInput设置背景,但是我想更改TextInput的部分背景颜色以突出显示某些字母。

我不知道这是否完全可能(在这里反应本机新手)

我正在创建一个用户必须在其中键入完全匹配的文本的字段。我想用绿色突出显示正确的字母,然后通过更改背景颜色以红色突出显示任何错误的字母。

如果TextInput不允许多种背景颜色,我想我可以尝试nested Text components like in this post。我正在考虑使用TextInput作为输入,但是随后在每次按键时更新UI的其他部分,从而使每个新字符成为一个新的Text组件,可以将它的backgroundColor设置为红色/绿色。
有什么想法吗?

最佳答案

您可以通过以下方式进行操作:

CText = (props) => <Text style={{backgroungColor: props.backgroungColor}}>{props.children}</Text>


内渲染添加:

const CText = this.CText


然后返回

<Text>I am <CText backgroungColor={'red'}>Blue color</CText> and <CText backgroungColor={'blue'}>Blue color</CText></Text>

关于javascript - 对不同的字母/字符 react Native TextInput不同的背景颜色吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48214080/

10-12 01:14