为不同的字母/字符反应原生 TextInput 不同的背景颜色？答案

【问题标题】：React Native TextInput different background colors for different letters/characters?为不同的字母/字符反应原生 TextInput 不同的背景颜色？
【发布时间】：2018-06-21 04:43:36
【问题描述】：

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

我不知道这是否可能（这里是 React Native 新手）

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

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

【问题讨论】：

标签： javascript user-interface react-native colors react-native-android

【解决方案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>

【讨论】：