# 0bit-mentions 中文文档
规范地址：https://npmcn.com/package/0bit-mentions/
版本：0\.0\.1
npm 元数据更新时间：2022-04-04T10:08:34.641Z
中文译文更新时间：2026-10-31T12:03:57.432Z
软件包许可：MIT
本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/0bit-mentions
原文对照：https://npmcn.com/package/0bit-mentions/?lang=original
项目主页：https://github.com/channingbabb/0bit-mentions#readme
源码仓库：https://github.com/channingbabb/0bit-mentions
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.5 MB，22 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2022-01-29T05:01:34.633Z
- 最新版本发布：2022-01-29T05:01:34.801Z
- 已发布版本数：1（近 12 个月 0 个）
## 中文简介
提到0位
## 安装
```sh
npm install 0bit-mentions
```
也可以使用：`pnpm add 0bit-mentions`、`yarn add 0bit-mentions`、`bun add 0bit-mentions`
## README
# react-native-mentions-editor [](https://badge.fury.io/js/react-native-mentions-editor)
提到了React Native的TextInput。在iOS上进行了测试，应该也适用于Android。因为它是一个纯Javascript基础解决方案，具有一些响应原生的TextInput支持。
- 灵感 [react-native-mentions](https://github.com/harshq/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 :)
```
## 演示
     
## 使用
```js
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"}
];
const formatMentionNode = (txt, key)=> (
{txt}
)
{displayTextWithMentions(message.text, formatMentionNode)}
```
## 它是如何工作的
该组件允许您在输入值的任何地方@提及。(不可能使用 [react-native-mentions](https://github.com/harshq/react-native-mentions)）。 很好地选择和突出显示文本。该组件使用了特殊标记 `@[username](id:1)` 区分输入值中的提及。 每当输入值改变时 `onChange` Callback将被调用，它带有一个包含两个属性的对象。
```js
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` 说到这里。你可以用它来标记/在服务器上发送电子邮件等。 你可以这样使用这个函数：
```js
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的功能。
```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`** 该对象将包含不同节点的覆盖样式。检查下面的对象，了解如何重写样式。
```js
editorStyles: {
mainContainer: {},
editorContainer: {...},
inputMaskTextWrapper: {},
inputMaskText: {},
input: {},
mentionsListWrapper:{},
mentionListItemWrapper: {}
mentionListItemTextWrapper: {},
mentionListItemTitle: {}
mentionListItemUsername: {}
}
```
## 例子
查看完整的示例 [例子](https://github.com/mrazadar/react-native-mentions-editor/tree/master/example) 文件夹
## 许可证
[MIT许可证](http://opensource.org/licenses/mit-license.html)。©Muhammad Raza Dar
## 常见问题
### 0bit-mentions 是什么？
提到0位
### 如何安装 0bit-mentions？
在项目目录运行 npm install 0bit-mentions，或使用 pnpm add / yarn add / bun add。
### 0bit-mentions 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/0bit-mentions 是否存在。
### 0bit-mentions 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### 0bit-mentions 可以商用吗？
0bit-mentions 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### 0bit-mentions 还在维护吗？
最新版本 0\.0\.1 发布于 2022/01/29（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/01/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。