javascript - React Native TextInput 不同字母/字符的不同背景颜色？

Question

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

我完全不知道这是否可行(这里是 React Native 新手)

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

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

Answer 1

你可以这样做:

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>