react-native实现@和#以及添加表情功能

类似微博发布时的@和话题#功能，先上图：

Simulator Screen Shot - iPhone 12 - 2021-10-12 at 11.15.22.png

代码：

TextInputComp() {
    let resultArray = [];
    let preIndex = 0;
    for (let i = 0;i {
          this.contentInput = r;
        }}
        multiline={true}
        textAlignVertical="top"
        placeholder="分享这一刻的想法..."
        placeholderTextColor="#C0BFC5"
        underlineColorAndroid="transparent"
        autoCapitalize={'none'}
        autoComplete={'off'}
        autoCorrect={false}
        onEndEditing={()=>{
          console.log('--onEndEditing--')
          //解决iOS上文字颜色不能变化的问题，需要先加个空格，再还原
          if (Platform.OS==='ios') {
            let value = this.state.contentInput;
            this.setState({ contentInput: value+' ' },()=>{
              setTimeout(()=>{
                this.setState({ contentInput: value });
              },1)
            });
          }
        }}
        onChangeText={(text) => {
          this.setState({ contentInput: text },()=>{
              setTimeout(()=>{
                this.contentInput.focus();
              },1)
           });
        }}
        onSelectionChange={(e)=>{
          this.state.selection = e.nativeEvent.selection;
        }}
   
      >
        {
          resultArray.map((item,index)=>{
            if (item[0]==='@'||item[0]==='#') {
              return {item}
            } else {
              return {item}
            }
          })
        }
      
    );

  }

点击添加话题或者@用户：

add(){
        this.setState({ contentInput: this.state.contentInput+'#话题1'+' '},()=>{
          setTimeout(()=>{
            this.contentInput.focus();
          },1)
        });
}