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

标签 javascript user-interface colors react-native

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

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

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

如果 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/

相关文章:

user-interface - 查找 Unity UI 元素的世界空间坐标

java - JAVA如何通过手工编码制作GUI?

带有离散色标的光栅图,用于负值和正值 R

javascript - Internet Explorer 和 jQuery 问题

javascript - 从 Ext.data.Store 访问 http 状态码

javascript - jsViews - 重新评估根属性更改上的 'if' 标记

javascript - RTS HTML5 多人游戏 - 启动 node.js 服务器 ingame

c++ - 在 Qt 用户界面中更新 itk 图像

python - 阿普塔纳工作室 3 : How to apply themes to python editor

android - 使用设置了三种以上颜色的 gradientDrawable