在 TextInput 中实现 @mention [英] Implement @mention in TextInput
问题描述
如何在 React Native 的 TextInput 中实现 @mention?
我已经尝试过这个
点击列表后，我想像这样显示:
到目前为止，我能够实现:
当我在 TextInput 中输入@"时出现用户列表.
当我点击用户时，我会在 TextInput 中获取用户名
代码:
renderSuggestionsRow() {返回 this.props.stackUsers.map((item, index) => {返回 (<TouchableOpacity key={`index-${index}`} onPress={() =>this.onSuggestionTap(item.label)}><视图样式={styles.suggestionsRowContainer}><视图样式={styles.userIconBox}><Text style={styles.usernameInitials}>{!!item.label &&item.label.substring(0, 2).toUpperCase()}</查看><视图样式={styles.userDetailsBox}><Text style={styles.displayNameText}>{item.label}</Text><Text style={styles.usernameText}>@{item.label}</Text></查看></查看></TouchableOpacity>)});}onSuggestionTap(用户名){this.setState({评论:this.state.comment.slice(0, this.state.comment.indexOf('@')) + '#'+用户名，活动:假});}handleChatText(值){if(value.includes('@')) {if(value.match(/@/g).length > 0) {this.setState({active: true});}} 别的 {this.setState({active: false});}this.setState({comment: value});}使成为() {const {comments} = this.state;返回 (<视图样式={styles.container}>{this.state.active ?<视图样式={{ marginLeft: 20}}>{this.renderSuggestionsRow()}</查看>: 空值}<视图样式={{高度:55}}/><视图样式={styles.inputContainer}><文本输入style={styles.inputChat}onChangeText={(value) =>this.handleChatText(value)}>{评论}</TextInput><TouchableOpacity style={styles.inputIcon} onPress={() =>this.addComment()}><Icon type='FontAwesome' name='send-o' style={{fontSize: 16, color: '#FFF'}}/></TouchableOpacity></查看></查看>);}一个简单的解决方案是使用
import * as React from "react";import { Text, View, StyleSheet } from 'react-native';从 'react-native-parsed-text' 导入 ParsedText；const userNameRegEx = new RegExp(/@([\w\d.\-_]+)?/g);导出默认类示例扩展 React.Component {handleNamePress = (name) =>{警报(按下用户名"+名称)；}使成为() {返回 (<视图样式={styles.container}><解析文本风格={styles.text}解析={[{模式:userNameRegEx，样式:styles.username，onPress:this.handleNamePress}，]}childrenProps={{allowFontScaling: false}}>这是一篇提到@someone 的文字！</ParsedText></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，justifyContent: '中心',alignItems: '中心',背景颜色:'#F5FCFF'，},文本: {颜色:黑色'，字体大小:15，},用户名: {白颜色'，fontWeight: '粗体',背景颜色:紫色"，填充水平:4，填充底部:2，边界半径:4，},});然而，这个库不支持渲染自定义视图.上面的示例仅通过纯样式实现.如果您需要自定义视图，则需要自己实现一些东西.很长一段时间，不可能渲染嵌入在文本组件中的任意组件.然而，现在这已经改变了，我们可以做这样的事情:
你好我是一个例子</查看>具有任意视图！</Text> 在此处检查两个代码示例:https://snack.expo.io/@hannojg/restless-salsa
一个重要的注意事项:您可以在 TextInput 中呈现 ParsedText 的输出或您自己的自定义组件，如下所示:
<TextInput...><解析文本...>{输入值}</ParsedText></TextInput>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>
);
}
One simple solution would be to use react-native-parsed-text. Here is an example:
import * as React from "react";
import { Text, View, StyleSheet } from 'react-native';
import ParsedText from 'react-native-parsed-text';
const userNameRegEx = new RegExp(/@([\w\d.\-_]+)?/g);
export default class Example extends React.Component {
handleNamePress = (name) => {
alert("Pressed username " + name);
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{pattern: userNameRegEx, style: styles.username, onPress: this.handleNamePress},
]
}
childrenProps={{allowFontScaling: false}}
>
This is a text with @someone mentioned!
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
color: 'black',
fontSize: 15,
},
username: {
color: 'white',
fontWeight: 'bold',
backgroundColor: "purple",
paddingHorizontal: 4,
paddingBottom: 2,
borderRadius: 4,
},
});
However, this library doesn't support rendering custom views. The example above is achieved by just pure styling. If you need a custom view you need to implement something yourself. For a long time, it wasn't possible to render arbitrary components embedded inside a text-components. However, this has changed now afaik and we can do stuff like this:
<Text>Hello I am an example <View style={{ height: 25, width: 25, backgroundColor: "blue"}}></View> with an arbitrary view!</Text>
Check both code examples here: https://snack.expo.io/@hannojg/restless-salsa
One important note: You can render the output of the ParsedText or your own custom component inside the TextInput, like this:
<TextInput
...
>
<ParsedText
...
>
{inputValue}
</ParsedText>
</TextInput>
这篇关于在 TextInput 中实现 @mention的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
