Implement @mention in TextInput

白昼怎懂夜的黑 提交于 2019-12-10 12:55:01

问题


How can I implement @mention in react native's TextInput?

I've tried this react-native-mention but it is not being maintained anymore. There are so many styling issues and callback issues.

What I want is to display custom view inside TextInput. Something like this.

And after tapping on the list I want to display like this:

So far I am able to achieve:

When I type '@' in TextInput user list appear.

And when I tap on user I get username in TextInput

Code:

   renderSuggestionsRow() {
      return this.props.stackUsers.map((item, index) => {
         return (
            <TouchableOpacity key={`index-${index}`} onPress={() => this.onSuggestionTap(item.label)}>
               <View style={styles.suggestionsRowContainer}>
                  <View style={styles.userIconBox}>
                     <Text style={styles.usernameInitials}>{!!item.label && item.label.substring(0, 2).toUpperCase()}</Text>
                  </View>
                  <View style={styles.userDetailsBox}>
                     <Text style={styles.displayNameText}>{item.label}</Text>
                     <Text style={styles.usernameText}>@{item.label}</Text>
                  </View>
               </View>
            </TouchableOpacity>
         )
      });
   }

   onSuggestionTap(username) {
      this.setState({
         comment: this.state.comment.slice(0, this.state.comment.indexOf('@')) + '#'+username,
         active: false
      });
   }

   handleChatText(value) {
      if(value.includes('@')) {
         if(value.match(/@/g).length > 0) {
            this.setState({active: true});
         }
      } else {
         this.setState({active: false});
      }
      this.setState({comment: value});
   }
render() {
      const {comments} = this.state;
      return (
         <View style={styles.container}>
            {
               this.state.active ?
               <View style={{ marginLeft: 20}}>
                  {this.renderSuggestionsRow()}
               </View> : null
            }
            <View style={{ height: 55}}/>
            <View style={styles.inputContainer}>
               <TextInput
                  style={styles.inputChat}
                  onChangeText={(value) => this.handleChatText(value)}
               >
                  {comment}
               </TextInput>

               <TouchableOpacity style={styles.inputIcon} onPress={() => this.addComment()}>
                  <Icon type='FontAwesome' name='send-o' style={{fontSize: 16, color: '#FFF'}}/>
               </TouchableOpacity>
            </View>
         </View>
      );
   }

来源:https://stackoverflow.com/questions/52342466/implement-mention-in-textinput

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!