如何解决标签格式化程序文本输入反应原生
我想在出现主题标签的 textInput 元素中动态更改单词的颜色。类似于许多应用程序。这是我到目前为止所拥有的:
handleCheckTextChange = (inputText:any) => {
const words = inputText.split(' ');
console.log(words);
const formattedText:any = [];
words.forEach((word:any,index:any) => {
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.formattedText = formattedText;
}
文本输入:
<TextInput
maxLength={descriptionMaxLength}
multiline={true}
placeholder='Type description here'
style={styles.descriptionInput}
returnKeyType='next'
blurOnSubmit={true}
onChangeText={(text) => this.handleCheckTextChange(text)}
value={this.descriptionString}
>
<Text>{this.formattedText}</Text>
</TextInput>
我从另一个堆栈溢出问题中得到了这个,但它似乎不适用于我的代码。收到 mobx 错误,提示“无法冻结动态可观察对象”。我使用相同的状态,但使用 mobx 进行状态处理。任何帮助表示赞赏!
解决方法
您可以使用react-native-twitter-textview
const App = () => {
const [value,onChangeText] = useState('');
return (
<View
style={StyleSheet.absoluteFill}
>
<TextInput
onChangeText={onChangeText}
value={value}
placeholder="Type some #hashtags or @mentions to get started."
multiline
numberOfLines={4}
/>
<TwitterTextView
style={styles.twitterTextView}
hashtagStyle={styles.hashtagStyle}
mentionStyle={styles.mentionStyle}
linkStyle={styles.linkStyle}
emailStyle={styles.emailStyle}
>
{value}
</TwitterTextView>
</View>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。