0bit-mentions 中文文档教程

发布于 3年前 浏览 19 项目主页 更新于 3年前

react-native-mentions-editor npm version

提到用于 React Native 的 TextInput。 在 iOS 上测试过,应该也适用于 Android。 因为它是一个简单的 Javascript 基础解决方案,具有一些反应本机 TextInput 支持。

Installation

yarn 添加 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 :)

Demo

alt text alt text alt text alt text alt text alt text

Usage

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>

How it works

此组件允许您在输入值的任何位置@mention。 (不可能使用 react-native-mentions)。 可以很好地选择和突出显示文本。 该组件使用特殊标记 @[username](id:1) 来区分输入值中的提及。 每当输入值更改时,将调用 onChange 回调,并使用包含两个属性的对象。

```js this.props.onChange({ displayText: text,// displayText: “嘿@mrazadar,这是一件好事” text: this.formatTextWithMentions(text) //text: “嘿@mrazadar 这是好作品" });

`displayText` Will have raw text user will see on the screen. You can see that in the comment. 
`text` Will have formatted text with some markup to parse mentions on the server and other clients. There is a function called `displayTextWithMentions` you can use this function to parse this mark-up with the parser function (Which format the mention node according to formatter function. Check the example app). 

If you want to only parse mentions in the string but don't want to format them you can use this `EditorUtils.findMentions` function to actually parse the mentions in the string. 
This will parse special mark-up `@[username](id:1)` and gives you the exact `positions` and `username` and `id` for that mention. Which you can use for tagging / emailing purposes on the server etc.
You can use this function as: 

js 从'react-native-mentions-editor'导入{EU as EditorUtils}; EditorUtils.findMentions("嘿@mrazadar 这是个好作品" );

//检查这个函数的定义 查找提及:(val) => { /** * 提及和选择都是基于字符串的第 0 个索引 * 表示它们在字符串中的索引从 0 开始 * findMentions 查找给定文本中提及的开始和结束位置 * @param val 字符串解析以查找提及 * @returns 找到的提及列表 */ 让 reg = /@[([^]]+?)](id:([^]]+?))/igm; 让索引 = []; while (match = reg.exec(val)) { index.push({ 开始:匹配索引, 结束:(reg.lastIndex-1), 用户名:匹配[1], userId: 匹配[2], 类型:EU.specialTagsEnum.mention }); } 返回索引; },

## Props {property : type}

**`list: array`** This should be the list of objects to be used as options for the mentions list. **Note** This must contain `id` and `username` properties to uniqely identify object in the list. 

**`initialValue: string`** Use this to initialize TextInput with the initial value. Usage. `initalValue: "Hey @[mrazadar](id:1) this is good work"`

**`clearInput: bool`** When true input will be clear automatically. 

**`onChange: function`** This function will be called on input change event.  

**`showEditor: bool`** Programmatically show/hide editor by using this property. 

**`toggleEditor: function`** Use this to handle `blur` event on input. 

**`showMentions: bool`** Use this property to programmatically trigger the `mentionsList` this will add `@` character in the value.

**`onHideMentions: function`** This callback will be called when user stop tracking of mention. 

**`placeholder: string`** placeholder for empty input. 

**`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list.

js renderMentionList 道具:对象

mentionListProps = { list: props.list, //你传递给这个组件的默认列表 keyword: state.keyword, //过滤列表的关键字。 例如<代码>@m isTrackingStarted: state.isTrackingStarted, // 如果用户开始输入 @ 则为真 onSuggestionTap: this.onSuggestionTap.bind(this), //一旦用户按下列表项,就应该调用这个函数 editorStyles: props.editorStyles, // 这些将是传递给编辑器组件的道具。 };

**`editorStyles: object`** This object will contain the overriding styles for different nodes. Check the below object to see how you can override styles. 

js 编辑样式:{ 主容器:{}, 编辑器容器:{...}, inputMaskTextWrapper: {}, inputMaskText: {}, 输入: {}, 提及列表包装器:{}, mentionListItemWrapper: {} mentionListItemTextWrapper: {}, mentionListItemTitle:{} 提及列表项用户名:{} } ```

Example

查看 example 文件夹中的完整示例

License

MIT 许可证。 © 穆罕默德·拉扎·达尔

react-native-mentions-editor npm version

Mentions TextInput for React Native. Tested on iOS and should work on Android as well. Because it's a plain Javascript base solution with some react-native TextInput support.

Installation

yarn add react-native-mentions-editor or npm install --save react-native-mentions-editor

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

Demo

alt text alt text alt text alt text alt text alt text

Usage

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>

How it works

This component allows you to @mention anywhere in the input value. (Not possible using react-native-mentions). Work nicely with selection and highlight of text. This component used special mark-up @[username](id:1) to differentiate mentions in the input value. Whenever input value change the onChange callback will be called, with an object containing two properties.

```js this.props.onChange({ displayText: text,// displayText: "Hey @mrazadar this is good work" text: this.formatTextWithMentions(text) //text: "Hey @mrazadar this is good work" });

`displayText` Will have raw text user will see on the screen. You can see that in the comment. 
`text` Will have formatted text with some markup to parse mentions on the server and other clients. There is a function called `displayTextWithMentions` you can use this function to parse this mark-up with the parser function (Which format the mention node according to formatter function. Check the example app). 

If you want to only parse mentions in the string but don't want to format them you can use this `EditorUtils.findMentions` function to actually parse the mentions in the string. 
This will parse special mark-up `@[username](id:1)` and gives you the exact `positions` and `username` and `id` for that mention. Which you can use for tagging / emailing purposes on the server etc.
You can use this function as: 

js import { EU as EditorUtils } from 'react-native-mentions-editor'; EditorUtils.findMentions("Hey @mrazadar 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; },

## Props {property : type}

**`list: array`** This should be the list of objects to be used as options for the mentions list. **Note** This must contain `id` and `username` properties to uniqely identify object in the list. 

**`initialValue: string`** Use this to initialize TextInput with the initial value. Usage. `initalValue: "Hey @[mrazadar](id:1) this is good work"`

**`clearInput: bool`** When true input will be clear automatically. 

**`onChange: function`** This function will be called on input change event.  

**`showEditor: bool`** Programmatically show/hide editor by using this property. 

**`toggleEditor: function`** Use this to handle `blur` event on input. 

**`showMentions: bool`** Use this property to programmatically trigger the `mentionsList` this will add `@` character in the value.

**`onHideMentions: function`** This callback will be called when user stop tracking of mention. 

**`placeholder: string`** placeholder for empty input. 

**`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list.

js 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`** This object will contain the overriding styles for different nodes. Check the below object to see how you can override styles. 

js editorStyles: { mainContainer: {}, editorContainer: {…}, inputMaskTextWrapper: {}, inputMaskText: {}, input: {}, mentionsListWrapper:{}, mentionListItemWrapper: {} mentionListItemTextWrapper: {}, mentionListItemTitle: {} mentionListItemUsername: {} } ```

Example

Check out the full example in example folder

License

MIT License. © Muhammad Raza Dar

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文