react native emoticons

react native emoticons

이모티콘을 포함한 react native emoticons

최신 스크린샷 샘플

설치하다

 npm install react - native - emoticons 

용법

UI 구성요소

• 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	이모티콘이 적은 간결한 모드	No	진실
showHistoryBar	Bool	기록 기능 활성화	No	진실
showPlusBar	Bool	더 많은 이모티콘 기능 활성화(개발 중입니다. 관심이 있으시면 풀 요청을 환영합니다.)	No	진실
asyncRender	Bool	비동기 렌더링	No	거짓

API

수입

 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 과 같은 맞춤형 이모티콘 지원