react native emoticons

react native emoticons

react native emoticons组件，包括表情符号

最新的截图样本

安装

 npm install react - native - emoticons 

用法

用户界面组件

• 步骤1

  导入组件包。

   import Emoticons from 'react-native-emoticons' ;

• 步骤2

  在页面渲染的正确位置编写组件代码。

   < Emoticons
   	 onEmoticonPress = { this . _onEmoticonPress . bind ( this ) }
   	 onBackspacePress = { this . _onBackspacePress . bind ( this ) }
   	 show = { this . state . showEmoticons }
   	 concise = { true }
   	 showHistoryBar = { true }
   	 showPlusBar = { true }
    />

  提示： onEmoticonPress属性可以获取类似{code:'?', name: 'GRIMACING FACE'}的表情结果。属性show将控制组件是否可见。 onBackspacePress属性将添加退格按钮的功能。

道具

支柱	类型	描述	必需的	默认
onEmoticonPress	Function	表情按下时的回调函数	Yes	没有任何
onBackspacePress	Function	按下退格按钮时的回调函数	YES	没有任何
show	Bool	显示组件	YES	错误的
concise	Bool	简洁的 mod，表情符号较少	No	真的
showHistoryBar	Bool	启用历史记录功能	No	真的
showPlusBar	Bool	启用更多表情功能（正在开发中，如果您对此感兴趣，欢迎pull request。）	No	真的
asyncRender	Bool	异步渲染	No	错误的

应用程序编程接口

进口

 import * as emoticons from 'react-native-emoticons' ;

1. 字符串化

    //Most database can't restore the emoji string?,so we map 
   //them to common string.
   
   const string = emoticons . stringify ( 'This is source emoji ?' ) ;
   console . log ( string ) ; 

    //output
   'This is source emoji [GRIMACING FACE]'

2. 解析

    //If we want to show the emoji(fetch from database) in view page
   //we need parse the string
   
   const emoji = emoticons . parse ( 'This is source emoji [GRIMACING FACE]' ) ;
   console . log ( emoji ) ; 

    //output
   'This is source emoji ?'

3. 分离器

    //this api is for backspace function
   const emoji = emoticons . splitter ( 'emoji?' ) ;
   console . log ( emoji ) ; 

    //output
   [ 'e' , 'm' , 'o' , 'j' , 'i' , '?' ] 

更远

支持weixin等自定义表情