@liuyunjs/at-editor

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