react native zendesk chat
v0.4.1 - Bug
React Native 애플리케이션 내에서 Zendesk Chat 표시를 지원하는 간단한 모듈입니다.
이 라이브러리는 귀하가 Zendesk의 공식 문서인 iOS 및 Android에 익숙하다고 가정합니다.
npm 사용:
npm install react-native-zendesk-chat --save
또는 실을 사용하여:
yarn add react-native-zendesk-chat
$ yarn install # and see if there are any errors
$ (cd ios ; pod install) # and see if there are any errors
# -- you may need to do `pod install --repo-update`이전 반응 네이티브 버전을 사용하는 경우 아래 고급 설정 섹션을 참조하세요.
Android 반응 네이티브 >= 0.60을 사용하는 경우 Android는 이 종속성을 자동으로 감지해야 합니다. 0.59를 사용하고 있다면 react-native link 호출해야 할 수도 있습니다.
import ZendeskChat from "react-native-zendesk-chat" ;
// Once in your application:
ZendeskChat . init ( "YOUR_ZENDESK_ACCOUNT_KEY" ) ;
// Optionally specify the appId provided by Zendesk
ZendeskChat . init ( "YOUR_ZENDESK_ACCOUNT_KEY" , "APP_ID_PROVIDED_BY_ZENDESK" ) ; // On button press, when you want to show chat:
ZendeskChat . startChat ( {
name : user . full_name ,
email : user . email ,
phone : user . mobile_phone ,
tags : [ "tag1" , "tag2" ] ,
department : "Your department" ,
// The behaviorFlags are optional, and each default to 'true' if omitted
behaviorFlags : {
showAgentAvailability : true ,
showChatTranscriptPrompt : true ,
showPreChatForm : true ,
showOfflineForm : true ,
} ,
// The preChatFormOptions are optional & each defaults to "optional" if omitted
preChatFormOptions : {
name : ! user . full_name ? "required" : "optional" ,
email : "optional" ,
phone : "optional" ,
department : "required" ,
} ,
localizedDismissButtonTitle : "Dismiss" ,
} ) ;YOUR_ZENDESK_ACCOUNT_KEY 얻기Zendesk 계정 키를 얻으려면 Zendesk SDK에서 SDK 초기화의 지침을 참조하세요.
계정 키를 얻으려면 다음 단계를 따르세요.
UI 스타일 변경은 대부분 기본 기술을 통해 수행됩니다.
Android의 경우 이는 공식 문서입니다. 예를 들어 앱 테마에 다음 3줄을 추가할 수 있습니다.
iOS에서는 옵션이 더 적습니다. 공식 문서 페이지를 확인하세요.
React-native-zendesk-chat <= 0.3.0에서
이전 버전의 라이브러리에서 마이그레이션하려면 적용한 모든 통합 단계를 제거하고 빠른 시작부터 다시 시작해야 합니다.
JS API 호출은 대부분 추가 변경 사항을 포함하여 매우 유사합니다.
고급 사용자나 이전 버전의 반응 네이티브를 실행하는 사용자는 네이티브에서 초기화를 원할 수 있습니다.
iOS < 0.60을 사용하는 경우 cocoapod를 수동으로 설치해야 할 수도 있습니다.
Podfile에 참조를 추가합니다.
pod 'RNZendeskChat', :git => 'https://github.com/taskrabbit/react-native-zendesk-chat.git'
그런 다음 pod install을 실행하세요. (cd ios; pod install)
또는 수동으로:
Xcode에서 node_modules/react-native-zendesk-chat/RNZendeskChat.m 및 node_modules/react-native-zendesk-chat/RNZendeskChat.h 프로젝트에 끌어다 놓습니다.
AppDelegate.m 에서 ZDCChat 구성: # import < ZDCChat/ZDCChat.h >
// ...
// Inside the appropriate appDidFinishLaunching method
[ZDCChat initializeWithAccountKey: @" YOUR_ZENDESK_ACCOUNT_KEY " appId: " YOUR_ZENDESK_APP_ID " ];
// And access other interesting APIs 반응 네이티브 < 0.60을 사용한다면 react-native link 호출할 수 있어야 합니다.
그래도 문제가 해결되지 않으면 다음과 같이 전체 수동 설치를 수행해야 할 수도 있습니다.
android/app/main/java/[...]/MainApplication.java 엽니다.import com.taskrabbit.zendesk.*; 파일 상단의 가져오기getPackages() 메소드에서 반환된 목록에 new RNZendeskChatPackage(this) 추가합니다.android/settings.gradle 에 다음 줄을 추가합니다. include ' :react-native-zendesk-chat '
project( ' :react-native-zendesk-chat ' ) . projectDir = new File (rootProject . projectDir, ' ../node_modules/react-native-zendesk-chat/android ' )android/app/build.gradle 의 종속성 블록 안에 다음 줄을 삽입합니다.RN >= 0.60인 경우:
dependencies {
//
api group : ' com.zendesk ' , name : ' chat ' , version : ' 2.2.0 '
api group : ' com.zendesk ' , name : ' messaging ' , version : ' 4.3.1 '또한 프로젝트 build.gradle에서도
gradle maven { url 'https://zendesk.jfrog.io/zendesk/repo' } 추가
RN < 0.60인 경우:
compile project( ' :react-native-zendesk-chat ' )android/app/main/java/[...]/MainActivity.java 에서 Chat 구성합니다. // Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.
// Call this once in your Activity's bootup lifecycle
Chat . INSTANCE . init ( mReactContext , key , appId );main 합니다. react native zendesk chat LICENSE 파일에 있는 것처럼 MIT 라이선스를 받았습니다.
