富ReactNative TextInput

Question

有任何方法来创建一个“富”的TextInput在反应本机？也许不是一个完整的wysiwyg，但也许只是改变了各种文本的文本颜色，比如Twitter或Facebook上的@ like功能。

Answer 1

解决方案是可以使用<Text>元素作为<TextInput>中的子元素，如下所示：

<TextInput>
    whoa no way <Text style={{color:'red'}}>rawr</Text>
</TextInput>

Answer 2

这个问题是在一段时间前提出的，但我认为我的答案可以帮助其他人寻找如何给字符串中的@ This部分着色。我不确定我这样做是干净的还是“反应”的，但是我是这样做的:我以输入的字符串作为分隔符，用一个空的空格将它分开。然后，我循环遍历数组，如果当前项与@ tag /@user的模式匹配，则将其替换为文本标记，并使用应用的样式；否则返回该项。最后，我在inputText元素中呈现TextInput数组(包含字符串和jsx元素)。希望这能有所帮助！

render() {
let inputText = this.state.content;
if (inputText){
  inputText = inputText.split(/(\s)/g).map((item, i) => {
    if (/@[a-zA-Z0-9]+/g.test(item)){
      return <Text key={i} style={{color: 'green'}}>{item}</Text>;
    } 
    return item;
  })
return <TextInput>{inputText}</TextInput>

​

​

Answer 3

从react本机文档中查看TokenizedTextExample。我想这会让你接近你想要做的事。有关守则如下：

class TokenizedTextExample extends React.Component {
  state: any;

  constructor(props) {
    super(props);
    this.state = {text: 'Hello #World'};
  }
  render() {

    //define delimiter
    let delimiter = /\s+/;

    //split string
    let _text = this.state.text;
    let token, index, parts = [];
    while (_text) {
      delimiter.lastIndex = 0;
      token = delimiter.exec(_text);
      if (token === null) {
        break;
      }
      index = token.index;
      if (token[0].length === 0) {
        index = 1;
      }
      parts.push(_text.substr(0, index));
      parts.push(token[0]);
      index = index + token[0].length;
      _text = _text.slice(index);
    }
    parts.push(_text);

    //highlight hashtags
    parts = parts.map((text) => {
      if (/^#/.test(text)) {
        return <Text key={text} style={styles.hashtag}>{text}</Text>;
      } else {
        return text;
      }
    });

    return (
      <View>
        <TextInput
          multiline={true}
          style={styles.multiline}
          onChangeText={(text) => {
            this.setState({text});
          }}>
          <Text>{parts}</Text>
        </TextInput>
      </View>
    );
  }
}