标签格式化程序文本输入反应原生

Question

我想在出现主题标签的 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 进行状态处理。任何帮助表示赞赏！

Answer 1

您可以使用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>
  );
}