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等自訂表情