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 では、オプションはより最小限です -- 公式ドキュメント ページを確認してください。
反応ネイティブ-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 React-native < 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 ライセンスを取得しています。
