React Native：在文本中查找子字符串，并以编程方式更改样式
Z.巴格利
如果我在这里遗漏了一些标准，请原谅我，因为 React 不是我默认的 javascript 开发工具。这似乎应该很容易获得，所以我想我应该问一下。是否有可能，如果有，我怎样才能找到一个子字符串，然后在 React Native 中更改该子字符串的样式？
例子：
render() {
return (
<View>
<Text>
{this.state.myText}
</Text>
</View>
);
}
componentDidMount() {
setTimeout(() => {
let newStr = this.state.myText.replace('green', '<Text style={{ color: "green" }}>green</Text>');
this.setState({ myText: newStr });
},
3000)
}
但显然您不能动态添加 Text 组件来以这种方式设置子字符串的样式。什么是正确的方法？
编辑：
我一直在研究这个，如果我没记错的话......我必须制作一个完整的子组件数组，跟踪子组件，然后动态地向这个数组添加/删除文本组件以及字符串如果我只是想更改文本的颜色？有人请告诉我 React 在这方面没有这个缺陷......
使用的最终代码：
render() {
return (
<View style={styles.container}>
<Text>
{this.state.textItems.map(item => (
<Text style={{ color: item === 'green' ? 'green' : 'black' }}>{item}</Text>
))}
</Text>
</View>
);
}
componentDidMount() {
setTimeout(() => {
this.setState({ textItems: this.state.textItems[0].split((/(green)/)) });
},
3000)
}
I Putu Yoga Permana
您可以定义一个包含字符串或对象的数组（如果您想对其进行更深入的自定义，不仅是颜色），然后将其映射到Text组件数组中。这是示例代码。
class Sample extends Component {
// You can manipulate this items array, using setState
state = {
items: ['black', 'green', 'red']
}
render() {
return (
<Text>
{textItems.map(item => (
<Text style={{ color: item }}>{item}</Text>
))}
</Text>
);
}
}
结果会是这样
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在React Native中更改子字符串样式
- 2
React native-动态更改样式
- 3
语义UI React更改样式占位符文本CSS
- 4
当TextInput onFocus和onBlur.React-Native更改样式
- 5
更改样式和属性 onTextChange - React Native
- 6
我可以在react js包中更改样式吗？
- 7
按类查找其ID包含子字符串的元素并更改样式
- 8
如何从 React Native 的列表中更改所选文本的样式
- 9
在React中验证样式组件的非空字符串
- 10
在React Native中以编程方式单击按钮
- 11
以编程方式更改样式
- 12
在 React 中更改 html 字符串中文本框的大小
- 13
如何将 React-Native 中的字符串更改为组件？
- 14
在React Native中按更改按钮样式
- 15
在React Native中渲染逗号分隔的值字符串
- 16
react-native-modal-dropdown 无法以编程方式更改所选
- 17
有没有办法在React Native中以编程方式更改SegmentedControlIOS选定的选项？
- 18
babel-plugin-react-css-modules不会更改样式标签中的类名称
- 19
检查字符串数组是否在react中包含子字符串值
- 20
使用React备忘录动态更改样式
- 21
在React Native中以编程方式添加组件
- 22
如何以编程方式在react-native中截图
- 23
根据字符串长度更改样式
- 24
我的字符串前后的省略号文本[React Native]
- 25
React Table中的字符串格式
- 26
React中的模板字符串
- 27
React JSX 中的字符串模板
- 28
使用React native以编程方式显示键盘
- 29
以编程方式重启React Native App
我来说两句