React Native 的 TextInput 如何给部分文本应用样式?
How to apply style for part the text in React Native’s TextInput?
我想在用户使用 TextInput
输入文本时为部分文本着色。例如,当一个单词以@开头时,我想将整个单词涂成红色。可能吗?
大家可以参考我的博览snack。拆分单词,检查“@”并分别呈现每个单词,并在通过条件时更改样式。
您实际上可以通过在 TextInput
:
Text
个元素来实现
<TextInput onChangeText={this.handleCheckTextChange}>
<Text>{this.state.formattedText}</Text>
</TextInput>
handle 函数将解析文本并为所有提及项创建样式化的 Text
元素:
handleCheckTextChange = (inputText) => {
const words = inputText.split(' ');
const formattedText = [];
words.forEach((word, index) => {
const isLastWord = index === words.length - 1;
if (!word.startsWith('@')) {
return isLastWord ? formattedText.push(word) : formattedText.push(word, ' ');
}
const mention = (
<Text key={word + index} style={{color: 'red'}}>
{word}
</Text>
);
isLastWord ? formattedText.push(mention) : formattedText.push(mention, ' ');
});
this.setState({formattedText: formattedText});
}