react-native-mentions-editor

提到了React Native的TextInput。在iOS上进行了测试，应该也适用于Android。因为它是一个纯Javascript基础解决方案，具有一些响应原生的TextInput支持。

• 灵感 react-native-mentions

安装

yarn add react-native-mentions-editor 或者 npm install --save react-native-mentions-editor

If you love this component, give a star, you will be a ray of sunshine :)

演示

使用

import Editor, { displayTextWithMentions} from 'react-native-mentions-editor';
const users = [ 
    { "id": 1, "name": "Raza Dar", "username": "mrazadar", "gender": "male"},
    { "id": 3, "name": "Atif Rashid", "username": "atif.rashid", "gender": "male"},
    { "id": 4, "name": "Peter Pan", "username": "peter.pan", "gender": "male"},
    { "id": 5, "name": "John Doe", "username": "john.doe", "gender": "male"}, 
    { "id": 6, "name": "Meesha Shafi", "username": "meesha.shafi", "gender": "female"}
];
<Editor 
    list={users} 
    initialValue={this.state.initialValue}
    clearInput={this.state.clearInput}
    onChange={this.onChangeHandler}
    showEditor={this.state.showEditor}
    toggleEditor={this.toggleEditor}
    showMentions={this.state.showMentions}
    onHideMentions={this.onHideMentions}
    ....
/>

const formatMentionNode = (txt, key)=> (
  <Text key={key} style={styles.mention}>
      {txt}
  </Text>
)

<Text style={styles.messageText}>
    {displayTextWithMentions(message.text, formatMentionNode)}
</Text>

它是如何工作的

该组件允许您在输入值的任何地方@提及。(不可能使用 react-native-mentions）。 很好地选择和突出显示文本。该组件使用了特殊标记 @[username](id:1) 区分输入值中的提及。 每当输入值改变时 onChange Callback将被调用，它带有一个包含两个属性的对象。

this.props.onChange({
    displayText: text,// displayText: "Hey @mrazadar this is good work"
    text: this.formatTextWithMentions(text) //text: "Hey @[mrazadar](id:1) this is good work" 
});

displayText 将有原始文本用户将看到在屏幕上。你可以在评论中看到。 text 将使用一些标记格式化文本以解析服务器和其他客户机上的提及。有一个函数叫做 displayTextWithMentions 可以使用这个函数用解析器函数解析这个标记（根据formatter函数格式化提及节点）。查看示例应用程序)。

如果你只想解析字符串中的提及，但不想格式化它们，你可以使用这个 EditorUtils.findMentions 函数实际解析字符串中的提及。 这将解析特殊标记 @[username](id:1) 给出了确切的 positions 和 username 和 id 说到这里。你可以用它来标记/在服务器上发送电子邮件等。 你可以这样使用这个函数：

import { EU as EditorUtils } from 'react-native-mentions-editor';
EditorUtils.findMentions("Hey @[mrazadar](id:1) this is good work" );

//Check the definition of this function
findMentions: (val) => {
    /**
     * Both Mentions and Selections are 0-th index based in the strings
     * meaning their indexes in the string start from 0
     * findMentions finds starting and ending positions of mentions in the given text
     * @param val string to parse to find mentions
     * @returns list of found mentions 
     */
    let reg = /@\[([^\]]+?)\]\(id:([^\]]+?)\)/igm;
    let indexes = [];
    while (match = reg.exec(val)) {
        indexes.push({
            start: match.index, 
            end: (reg.lastIndex-1),
            username: match[1],
            userId: match[2],
            type: EU.specialTagsEnum.mention
        });
    }
    return indexes;
},

道具{属性：类型}

list: array 这应该是要用作提及列表选项的对象列表。 注意 这必须包含 id 和 username 属性来唯一标识列表中的对象。

initialValue: string 使用这个函数用初始值初始化TextInput。用法。 initalValue: "Hey @[mrazadar](id:1) this is good work"

clearInput: bool 当输入为真时将自动清除。

onChange: function 此函数将在输入更改事件时调用。

showEditor: bool 使用此属性以编程方式显示/隐藏编辑器。

toggleEditor: function 使用这个来处理 blur 输入时的事件。

showMentions: bool 使用此属性以编程方式触发 mentionsList 这将添加 @ 值中的字符。

onHideMentions: function 当用户停止跟踪提及时，将调用此回调。

placeholder: string 空输入的占位符。

renderMentionList: function 如果你想呈现完全不同的列表。您可以使用此属性来提供备选提及列表呈现器。它将与某些属性一起调用，以控制list的功能。

renderMentionList Props: object

 mentionListProps= {
    list: props.list, //the default list you passed to this component
    keyword: state.keyword, //keyword to filter the list. e.g. `@m`
    isTrackingStarted: state.isTrackingStarted, // will be true if user started typing `@` 
    onSuggestionTap: this.onSuggestionTap.bind(this), //this function should be called once user press on the list item
    editorStyles: props.editorStyles, // these will be the props passed to the Editor component. 
};

editorStyles: object 该对象将包含不同节点的覆盖样式。检查下面的对象，了解如何重写样式。

editorStyles: {
    mainContainer: {}, 
    editorContainer: {...}, 
    inputMaskTextWrapper: {},
    inputMaskText: {},
    input: {},
    mentionsListWrapper:{},
    mentionListItemWrapper: {} 
    mentionListItemTextWrapper: {},
    mentionListItemTitle: {}
    mentionListItemUsername: {}
}

例子

查看完整的示例 例子 文件夹

许可证

MIT许可证。©Muhammad Raza Dar