at-editor

一个带有@功能的 react-native 输入框

安装

    npm install @liuyunjs/at-editor --save

    or

    yarn add @liuyunjs/at-editor

示例

import * as React from 'react';
import { View, Text } from 'react-native';
import ATEditor from '@liuyunjs/at-editor';

export default () => {
  const editor = React.useRef();

  return (
    <View style={{ flex: 1 }}>
      <Text onPress={() => editor.current.trigger()}>trigger</Text>
      <Text onPress={() => editor.current.addAtUser({ username: 'liuyunjs', id: '10086' })}>
        addUser
      </Text>
      <View style={{ height: 200 }}>
        <ATEditor
          defaultValue="hello @[liuyunjs](id: 10087), This is an @input box"
          onAt={console.log}
          onChange={console.log}
          ref={editor}
        />
      </View>
    </View>
  );
};

props

| 名称 | 类型 | 默认值 | 是否必传 | 描述 | | :-------------------- | :----------------------------------------------------- | :----------------------------------------------------- | :------- | :----------------------------------------------------------------------------------- | | defaultValue | string | void | 否 | 输入框默认值 | | onAt | () => void | void | 否 | 检测到输入@时触发的回调 | | onChange | ({displayText: string, text: string, users: ATUser[]}) | void | 否 | 输入框文本变化时触发的回调，如果传入了 defaultValue，会在渲染之后立即触发一次 | | matchFormattedTextReg | RegExp | /@[([^]]+?)](id:([^]]+?))/gim | 否 | 从一串格式化过的字符串中匹配@信息的正则表达式 | | formatAtUser | (user: ATUser) =>string | (user: ATUser) => @[${user.username}](id:${user.id}) | 否 | 将@信息格式化成固定格式的函数，可以和 matchFormattedTextReg 一起使用实现自定义的格式 |

其余参考 TextInput