前言：在集成ReactNative推送之前，须要理解ReactNative与Android原生交互
一、RN与Android原生交互
RN给原生传递参数
步骤：
1.用Android Studio关上一个曾经存在的RN我的项目，即用AS关上 我的项目文件夹/android,如下图所示
2.在Android原生这边创立一个类继承ReactContextBaseJavaModule，这个类里边放咱们须要被RN调用的办法，将其封装成一个原生模块。
MyNativeModule.java代码如下：
package com.awesomeproject;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import com.facebook.react.modules.core.DeviceEventManagerModule;import com.xiaomi.mipush.sdk.MiPushClient;import org.json.JSONException;import org.json.JSONObject;public class PushModule extends ReactContextBaseJavaModule { private ReactApplicationContext reactContext; public PushModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "PushModule"; } /** 从RN界面外面调用该办法 **/ @ReactMethod public void getDeviceToken(){ MainApplication.getReactPackage().mModule.sendDataToJS( MiPushClient.getRegId(MainApplication.getContext())); } public void sendDataToJS(String deviceToken){ JSONObject jsonObject = new JSONObject(); try { jsonObject.put("deviceToken",deviceToken); jsonObject.put("deviceName",""); } catch (JSONException e) { throw new RuntimeException(e); } this.reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("deviceToken",jsonObject.toString()); }}本类中寄存咱们要复用的原生办法，继承了ReactContextBaseJavaModule类，并且实现了其getName（）办法，构造方法也是必须的。按着Alt+Enter程序会主动提醒。接着定义了一个办法，该办法必须应用注解@ReactMethod表明，阐明是RN要调用的办法。
3.在Android原生这边创立一个类实现接口ReactPackage包管理器，并把第二步创立的类加到原生模块（NativeModule）列表里。
PushPackage.java代码如下：
package com.awesomeproject;import com.facebook.react.ReactPackage;import com.facebook.react.bridge.NativeModule;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.uimanager.ViewManager;import java.util.ArrayList;import java.util.Collections;import java.util.List;public class PushPackage implements ReactPackage { public PushModule mModule; @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> list = new ArrayList<>(); mModule = new PushModule(reactContext); list.add(mModule); return list; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }}4.将第三步创立的包管理器增加到ReactPackage列表里（getPackage办法里）
MainApplication.java代码如下：
package com.awesomeproject;import android.app.Application;import android.content.Context;import android.util.Log;import com.facebook.react.PackageList;import com.facebook.react.ReactApplication;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.config.ReactFeatureFlags;import com.facebook.soloader.SoLoader;import com.awesomeproject.newarchitecture.MainApplicationReactNativeHost;import com.vivo.push.IPushActionListener;import com.vivo.push.PushClient;import com.vivo.push.PushConfig;import com.vivo.push.util.VivoPushException;import com.xiaomi.channel.commonutils.logger.LoggerInterface;import com.xiaomi.mipush.sdk.Logger;import com.xiaomi.mipush.sdk.MiPushClient;import java.lang.reflect.InvocationTargetException;import java.util.List;public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); packages.add(mCommPackage); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } }; private final ReactNativeHost mNewArchitectureNativeHost = new MainApplicationReactNativeHost(this); @Override public ReactNativeHost getReactNativeHost() { if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { return mNewArchitectureNativeHost; } else { return mReactNativeHost; } } static Context context; public static Context getContext() { return context; } private static final PushPackage mCommPackage = new PushPackage(); public static PushPackage getReactPackage() { return mCommPackage; } @Override public void onCreate() { super.onCreate(); context = this; // If you opted-in for the New Architecture, we enable the TurboModule system ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); //初始化push try {//PushConfig.agreePrivacyStatement属性及含意阐明请参考接口文档//应用办法 PushConfig config = new PushConfig.Builder() .agreePrivacyStatement(true) .build(); PushClient.getInstance(MainApplication.this).initialize(config); } catch (VivoPushException e) { Log.d("VivoPushException","-------------"+e.toString());//此处异样阐明是有必须的vpush配置未配置所致，须要仔细检查集成指南的各项配置。 e.printStackTrace(); }// 关上push开关, 敞开为turnOffPush，详见api接入文档 PushClient.getInstance(this).turnOnPush(new IPushActionListener() { @Override public void onStateChanged(int state) { // TODO: 开关状态解决， 0代表胜利，获取regid倡议在state=0后获取； Log.d("vivo初始化------","开关状态解决， 0代表胜利，获取regid倡议在state=0后获取----"+state); } }); //小米初始化push推送服务 MiPushClient.registerPush(this, "2882303761517520571", "5841752092571"); //关上Log LoggerInterface newLogger = new LoggerInterface() { @Override public void setTag(String tag) { Log.d("MainApplication-------",tag); // ignore } @Override public void log(String content, Throwable t) { Log.d("MainApplication-------",content+"-----"+t.toString()); } @Override public void log(String content) { Log.d("MainApplication-------",content); } }; Logger.setLogger(this, newLogger); } /** * Loads Flipper in React Native templates. Call this in the onCreate method with something like * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); * * @param context * @param reactInstanceManager */ private static void initializeFlipper( Context context, ReactInstanceManager reactInstanceManager) { if (BuildConfig.DEBUG) { try { /* We use reflection here to pick up the class that initializes Flipper, since Flipper library is not available in release mode */ Class<?> aClass = Class.forName("com.awesomeproject.ReactNativeFlipper"); aClass .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) .invoke(null, context, reactInstanceManager); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } } }}5.在RN中去调用原生模块，必须import NativeModule模块。
批改App.js文件，须要从‘react-native’中援用‘NativeModules’，
App.js代码如下：
NativeModules.PushModule.getDeviceToken();来剖析一下程序运行流程：
（1）在配置文件AndroidManifest.xml中，android:name=".MainApplication"，则MainApplication.java会执行。
（2）在MainApplication.java中，有咱们创立的包管理器对象。程序退出PushPackage.java中。
（3）在PushPackage.java中，将咱们本人创立的模块退出了原生模块列表中，程序进入PushModule.java中。
（4）在PushModule.java中，提供RN 调用的办法getDeviceToken
实现数据从Android原生回调到RN前端界面
咱们都晓得，要被RN调用的办法必须是void 类型，即没有返回值，然而我的项目中很多中央都须要返回数据。那怎么实现呢？
步骤：
1.在Android原生这边创立一个类继承ReactContextBaseJavaModule，这个类里边放咱们须要被RN调用的办法，将其封装成一个原生模块。
在下面的PushModule中曾经继承了ReactContextBaseJavaModule
咱们须要调用sendDataToJS将数据传到RN 层。
PushModule.java 代码如下
package com.awesomeproject;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import com.facebook.react.modules.core.DeviceEventManagerModule;import com.xiaomi.mipush.sdk.MiPushClient;import org.json.JSONException;import org.json.JSONObject;public class PushModule extends ReactContextBaseJavaModule { private ReactApplicationContext reactContext; public PushModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "PushModule"; } /** 从RN界面外面调用该办法 **/ @ReactMethod public void getDeviceToken(){ MainApplication.getReactPackage().mModule.sendDataToJS( MiPushClient.getRegId(MainApplication.getContext())); } public void sendDataToJS(String deviceToken){ JSONObject jsonObject = new JSONObject(); try { jsonObject.put("deviceToken",deviceToken); jsonObject.put("deviceName","2882303761517520571"); } catch (JSONException e) { throw new RuntimeException(e); } this.reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("deviceToken",jsonObject.toString()); }}步骤：
1、在RN 中调用原生的办法
NativeModules.PushModule.getDeviceToken();2、原生提供对应的办法，将数据传递
3、RN 接管原生传递的数据
至此，咱们实现了RN复用原生代码，行将原生模块封装成一个接口，在RN中调用。并且能够封装更加简单的办法，同时实现了数据回调，行将数据从原生模块中传递到RN前端。
二、原生获取设施信息和ReactNative进行绑定信息
本文介绍如何如何从原生获取推送所须要的设施信息以及ReactNative 绑定信息
前提条件
集成环信即时通讯 React-Native，并且能够失常运行，初始化以及登录
集成文档见环信官网：https://docs-im-beta.easemob.com/document/react-native/quicks...
原生获取设施信息：
华为：
在获取华为推送token 之前，咱们须要先集成华为sdk，能够参考华为官网官网的集成，也能够参考环信官网进行集成；
获取推送token 参考华为官网文档
获取代码如下：
private void getToken() { // 创立一个新线程 new Thread() { @Override public void run() { try { // 从agconnect-services.json文件中读取APP_ID String appId = "your APP_ID"; // 输出token标识"HCM" String tokenScope = "HCM"; String token = HmsInstanceId.getInstance(MainActivity.this).getToken(appId, tokenScope); Log.i(TAG, "get token: " + token); // 判断token是否为空 if(!TextUtils.isEmpty(token)) { sendRegTokenToServer(token); } } catch (ApiException e) { Log.e(TAG, "get token failed, " + e); } } }.start();}private void sendRegTokenToServer(String token) { Log.i(TAG, "sending token to server. token:" + token);}华为官网有具体的集成介绍，能够仔细阅读， getToken() 办法获取到的就是推送所须要的token。
小米：
1. 前提条件
您已启用推送服务，并取得利用的AppId、AppKey和AppSecret。
2. 接入筹备
- 下载MiPush Android客户端SDK软件包
MiPush Android客户端SDK从5.0.1版本开始，提供AAR包接入形式，其反对的最低Android SDK版本为19。
下载地址：https://admin.xmpush.xiaomi.com/zh_CN/mipush/downpage
建议您下载最新版本。 - 如您之前通过JAR包形式接入过MiPush客户端SDK，需将原JAR包接入配置齐全删除，具体配置请参见《Android客户端SDK集成指南（JAR版）》。
接入领导
增加依赖
首先将MiPush SDK的AAR包如MiPush_SDK_Client_xxx.aar 复制到我的项目/libs/目录，而后在我的项目APP module的build.gradle中依赖：android{ repositories { flatDir { dirs 'libs' } }}dependencies { implementation (name: 'MiPush_SDK_Client_xxx', ext: 'aar')}而后须要把该自定义BroadcastReceiver注册到AndroidManifest.xml文件中，注册内容如下：
<receiver android:exported="true" android:name="com.xiaomi.mipushdemo.DemoMessageReceiver"> <!--这里com.xiaomi.mipushdemo.DemoMessageRreceiver改成app中定义的残缺类名--> <intent-filter> <action android:name="com.xiaomi.mipush.RECEIVE_MESSAGE" /> </intent-filter> <intent-filter> <action android:name="com.xiaomi.mipush.MESSAGE_ARRIVED" /> </intent-filter> <intent-filter> <action android:name="com.xiaomi.mipush.ERROR" /> </intent-filter></receiver>
留神：请务必确保该自定义BroadcastReceiver所在过程与调用注册推送接口（MiPushClient.registerPush()）的过程为同一过程（强烈建议都在主过程中）。
注册推送服务
通过调用MiPushClient.registerPush来初始化小米推送服务。注册胜利后，您能够在自定义的onCommandResult和onReceiveRegisterResult中收到注册后果，其中的regId即是以后设施上以后app的惟一标示。您能够将regId上传到本人的服务器，不便向其发消息。
为了进步push的注册率，您能够在Application的onCreate中初始化push。您也能够依据须要，在其余中央初始化push。 代码如下：
public class DemoApplication extends Application { public static final String APP_ID = "your appid"; public static final String APP_KEY = "your appkey"; public static final String TAG = "your packagename"; @Override public void onCreate() { super.onCreate(); //初始化push推送服务 if(shouldInit()) { MiPushClient.registerPush(this, APP_ID, APP_KEY); } //关上Log LoggerInterface newLogger = new LoggerInterface() { @Override public void setTag(String tag) { // ignore } @Override public void log(String content, Throwable t) { Log.d(TAG, content, t); } @Override public void log(String content) { Log.d(TAG, content); } }; Logger.setLogger(this, newLogger); } private boolean shouldInit() { ActivityManager am = ((ActivityManager) getSystemService(Context.ACTIVITY_SERVICE)); List<RunningAppProcessInfo> processInfos = am.getRunningAppProcesses(); String mainProcessName = getApplicationInfo().processName; int myPid = Process.myPid(); for (RunningAppProcessInfo info : processInfos) { if (info.pid == myPid && mainProcessName.equals(info.processName)) { return true; } } return false; }}最初获取推送token，代码如下
MiPushClient.getRegId(MainApplication.getContext())vivo:
vivo sdk 下载地址：https://swsdl.vivo.com.cn/appstore/developer/uploadFile/20230602/qrmgtt/vivopushsdk_3.0.0.7_488.rar
一、集成sdk
1. 导入aar 包
将解压后的libs文件夹中vivopushsdk-VERSION.aar(vivopushsdk-VERSION.aar为集成的jar包名字，VERSION为版本名称)拷贝到您的工程的libs文件夹中。
在android我的项目app目录下的build.gradle中增加aar依赖。
dependencies { implementation fileTree(include: ['*.jar'], dir: 'libs') implementation files("libs/vivo_pushSDK_v3.0.0.7_488.aar")}2. 增加权限
vivo Push集成只须要配置网络权限，请在以后工程AndroidManifest.xml中的manifest节点下增加以下代码：
<!—Vivo Push须要的权限--> <uses-permission android:name="android.permission.INTERNET"/>3. 配置appid 、api key等信息
vivo Push集成须要配置对应的appid 、app key信息，其中appid 和app key是在开发者平台中申请的，详见 vivo push 操作手册。
请在以后工程AndroidManifest.xml中的Application节点下增加以下代码（倡议复制粘贴避免出错）：
<!--Vivo Push开放平台中利用的appid 和api key--> <meta-data android:name="api_key" android:value="xxxxxxxx"/> <meta-data android:name="app_id" android:value="xxxx"/>4. 自定义告诉回调类
在以后工程中新建一个类 PushMessageReceiverImpl(自定义类名)继承OpenClientPushMessageReceiver 并重载实现相干办法。并在以后工程的AndroidManifest.xml文件中，增加自定义Receiver信息，代码如下：
<!--push利用定义音讯receiver申明--> <receiver android:name="xxx.xxx.xxx.PushMessageReceiverImpl(自定义类名)" android:exported="false"> <intent-filter> <!--接管push音讯--> <action android:name="com.vivo.pushclient.action.RECEIVE"/> </intent-filter></receiver>5. 注册service
接入SDK，需注册相干服务以确保失常。
请在以后工程AndroidManifest.xml中的Application节点下增加以下代码（倡议复制粘贴避免出错）：
<!--Vivo Push须要配置的service、activity--> <service android:name="com.vivo.push.sdk.service.CommandClientService" android:permission="com.push.permission.UPSTAGESERVICE" android:exported="true"/>6. 配置sdk版本信息（仅通过jar包集成形式须要配置，通过aar包集成无需配置）
通过jar包形式接入SDK，需配置SDK版本信息确保失常。
请在以后工程AndroidManifest.xml中的Application节点下增加以下代码（倡议复制粘贴避免出错）：
<!--Vivo Push SDK的版本信息--> <meta-data android:name="sdk_version_vivo" android:value="488"/>二、启动推送
在工程的Application中，增加以下代码，用来启动关上push开关，胜利后即可在告诉音讯达到时收到告诉。
//在以后工程入口函数，倡议在Application的onCreate函数中，在获取用户的批准后，增加以下代码：
//初始化pushtry {//PushConfig.agreePrivacyStatement属性及含意阐明请参考接口文档//应用办法 PushConfig config = new PushConfig.Builder() .agreePrivacyStatement(true/false) .build();PushClient.getInstance(this).initialize(config);} catch (VivoPushException e) {//此处异样阐明是有必须的vpush配置未配置所致，须要仔细检查集成指南的各项配置。 e.printStackTrace();}// 关上push开关, 敞开为turnOffPush，详见api接入文档PushClient.getInstance(getApplicationContext()).turnOnPush(new IPushActionListener() { @Override public void onStateChanged(int state) { // TODO: 开关状态解决， 0代表胜利，获取regid倡议在state=0后获取； } });三、获取token
即获取regId，应用getRegId() 函数获取参考如下：PushClient.getInstance(context).getRegId(new IPushQueryActionListener() { @Override public void onSuccess(String regid) { //获取胜利，回调参数即是以后利用的regid； } @Override public void onFail(Integer errerCode) { //获取失败，能够联合错误码参考查问失败起因； }});在 Api 接口 turnOnPush回调胜利之后，即可获取到注册id。注：详情及别的性能见vivo 官网文档：https://dev.vivo.com.cn/documentCenter/doc/365
oppo：
SDK集成步骤
注册并下载SDK
Android的SDK以aar模式提供，第三方APP只须要增加大量代码即可接入OPPO推送服务。
代码参考demo下载：heytapPushDemo
下载aar文件，即3.1.0版本sdk：com.heytap.msp_3.1.0.aar
aar依赖
第一步：增加maven仓库
repositories { google() mavenCentral()}第二步：增加maven依赖
implementation(name: 'com.heytap.msp_3.1.0', ext: 'aar')//以下依赖都须要增加implementation 'com.google.code.gson:gson:2.6.2'implementation 'commons-codec:commons-codec:1.6'implementation 'com.android.support:support-annotations:28.0.0'(SDK中的接入最小依赖项，也能够参考demo中的依赖)第三步：增加aar配置
在build文件中增加以下代码
Android{....repositories { flatDir { dirs 'libs' }}....}配置AndroidManifest.xml
1)OPPO推送服务SDK反对的最低安卓版本为Android 4.4零碎。<uses-sdk android:minSdkVersion="19"/> 2)推送服务组件注册//必须配置<service android:name="com.heytap.msp.push.service.XXXService" android:permission="com.heytap.mcs.permission.SEND_PUSH_MESSAGE" android:exported="true"> <intent-filter> <action android:name="com.heytap.mcs.action.RECEIVE_MCS_MESSAGE"/> <action android:name="com.heytap.msp.push.RECEIVE_MCS_MESSAGE"/> </intent-filter></service>（兼容Q版本，继承DataMessageCallbackService） <service android:name="com.heytap.msp.push.service.XXXService" android:permission="com.coloros.mcs.permission.SEND_MCS_MESSAGE"android:exported="true"> <intent-filter> <action android:name="com.coloros.mcs.action.RECEIVE_MCS_MESSAGE"/> </intent-filter></service>（兼容Q以下版本，继承CompatibleDataMessageCallbackService）注册推送服务
1)利用举荐在Application类主过程中调用HeytapPushManager.init(…)接口，这个办法不是耗时操作，执行之后能力应用推送服务
2)业务须要调用api接口，例如利用内开关开启/敞开，须要调用注册接口之后，才会失效
3)因为不是所有平台都反对MSP PUSH，提供接口HeytapPushManager.isSupportPush()不便利用判断是否反对,反对能力执行后续操作
4)通过调用HeytapPushManager.register(…)进行利用注册，注册胜利后,您能够在ICallBackResultService的onRegister回调办法中失去regId,您能够将regId上传到本人的服务器，不便向其发消息。初始化相干参数具体要求参考具体API阐明中的初始化局部。
5)为了进步push的注册率，你能够在Application的onCreate中初始化push。你也能够依据须要，在其余中央初始化push。如果第一次注册失败,第二次能够间接调用PushManager.getInstance().getRegister()进行重试,此办法默认会应用第一次传入的参数掉调用注册。
至此，咱们获取到了不同设施的device_token
三、从原生将device_token 传到RN 并且绑定
1、原生调用办法
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("deviceToken",jsonObject.toString());通过PushModule 类进行传递，PushModule 代码如下：
package com.awesomeproject;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import com.facebook.react.modules.core.DeviceEventManagerModule;import com.xiaomi.mipush.sdk.MiPushClient;import org.json.JSONException;import org.json.JSONObject;public class PushModule extends ReactContextBaseJavaModule { private ReactApplicationContext reactContext; public PushModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "PushModule"; } /** 从RN界面外面调用该办法 **/ @ReactMethod public void getDeviceToken(){ MainApplication.getReactPackage().mModule.sendDataToJS( MiPushClient.getRegId(MainApplication.getContext())); } public void sendDataToJS(String deviceToken){ JSONObject jsonObject = new JSONObject(); try { jsonObject.put("deviceToken",deviceToken); jsonObject.put("deviceName","2882303761517520571"); } catch (JSONException e) { throw new RuntimeException(e); } this.reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("deviceToken",jsonObject.toString()); }}2、RN 层进行获取数据
NativeModules.PushModule.getDeviceToken(); DeviceEventEmitter.addListener('deviceToken',(res)=>{ const goosid = JSON.parse(res); deviceToken = goosid.deviceToken; manufacturer = goosid.deviceName; console.log('React Native界面,收到数据：',goosid);3、获取到数据后调用环信RN sdk 办法进行绑定
ChatClient.getInstance().updatePushConfig(push);js 代码如下
// 导入依赖库import React, { useEffect } from 'react';import { DeviceEventEmitter, NativeModules, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, View,} from 'react-native';import { ChatClient, ChatMessage, ChatMessageChatType, ChatOptions, ChatPushConfig,} from 'react-native-chat-sdk';// 创立 appconst App = () => { // 进行 app 设置 const title = 'ChatQuickstart'; var deviceToken=''; var manufacturer=''; NativeModules.PushModule.getDeviceToken(); DeviceEventEmitter.addListener('deviceToken',(res)=>{ const goosid = JSON.parse(res); deviceToken = goosid.deviceToken; manufacturer = goosid.deviceName; console.log('React Native界面,收到数据：',goosid);}) const [appKey, setAppKey] = React.useState('1137220225110285#demo'); const [username, setUsername] = React.useState('p9'); const [password, setPassword] = React.useState('1'); const [userId, setUserId] = React.useState(''); const [content, setContent] = React.useState(''); const [logText, setWarnText] = React.useState('Show log area'); // 输入 console log 文件 useEffect(() => { logText.split('\n').forEach((value, index, array) => { if (index === 0) { console.log(value); } }); }, [logText]); // 输入 UI log 文件 const rollLog = text => { setWarnText(preLogText => { let newLogText = text; preLogText .split('\n') .filter((value, index, array) => { if (index > 8) { return false; } return true; }) .forEach((value, index, array) => { newLogText += '\n' + value; }); return newLogText; }); }; // 设置音讯监听器。 const setMessageListener = () => { let msgListener = { onMessagesReceived(messages) { for (let index = 0; index < messages.length; index++) { rollLog('received msgId: ' + messages[index].msgId); } }, onCmdMessagesReceived: messages => {}, onMessagesRead: messages => {}, onGroupMessageRead: groupMessageAcks => {}, onMessagesDelivered: messages => {}, onMessagesRecalled: messages => {}, onConversationsUpdate: () => {}, onConversationRead: (from, to) => {}, }; ChatClient.getInstance().chatManager.removeAllMessageListener(); ChatClient.getInstance().chatManager.addMessageListener(msgListener); }; // SDK 初始化。 // 调用任何接口之前，请先进行初始化。 const init = () => { let option = new ChatOptions({ autoLogin: false, appKey: appKey }); ChatClient.getInstance().removeAllConnectionListener(); ChatClient.getInstance() .init(option) .then(() => { rollLog('init success'); this.isInitialized = true; let listener = { onTokenWillExpire() { rollLog('token expire.'); }, onTokenDidExpire() { rollLog('token did expire'); }, onConnected() { rollLog('login success.'); setMessageListener(); }, onDisconnected(errorCode) { rollLog('login fail: ' + errorCode); }, }; ChatClient.getInstance().addConnectionListener(listener); }) .catch(error => { rollLog( 'init fail: ' + (error instanceof Object ? JSON.stringify(error) : error), ); }); }; // 注册账号。 const registerAccount = () => { if (this.isInitialized === false || this.isInitialized === undefined) { rollLog('Perform initialization first.'); return; } rollLog('start register account ...'); ChatClient.getInstance() .createAccount(username, password) .then(response => { rollLog(`register success: userName = ${username}, password = ******`); }) .catch(error => { rollLog('register fail: ' + JSON.stringify(error)); }); }; // 用环信即时通讯 IM 账号和明码登录。 const loginWithPassword = () => { if (this.isInitialized === false || this.isInitialized === undefined) { rollLog('Perform initialization first.'); return; } rollLog('start login ...'); ChatClient.getInstance() .login(username, password) .then(() => { rollLog('login operation success.'); let push = new ChatPushConfig({ deviceId:manufacturer, deviceToken:deviceToken, }); console.log("--------------------------------------------"); console.log(manufacturer); console.log(deviceToken); console.log("--------------------------------------------"); ChatClient.getInstance().updatePushConfig(push); }) .catch(reason => { rollLog('login fail: ' + JSON.stringify(reason)); }); }; // 登出。 const logout = () => { if (this.isInitialized === false || this.isInitialized === undefined) { rollLog('Perform initialization first.'); return; } rollLog('start logout ...'); ChatClient.getInstance() .logout() .then(() => { rollLog('logout success.'); }) .catch(reason => { rollLog('logout fail:' + JSON.stringify(reason)); }); }; // 发送一条文本音讯。 const sendmsg = () => { if (this.isInitialized === false || this.isInitialized === undefined) { rollLog('Perform initialization first.'); return; } let msg = ChatMessage.createTextMessage( userId, content, ChatMessageChatType.PeerChat, ); const callback = new (class { onProgress(locaMsgId, progress) { rollLog(`send message process: ${locaMsgId}, ${progress}`); } onError(locaMsgId, error) { rollLog(`send message fail: ${locaMsgId}, ${JSON.stringify(error)}`); } onSuccess(message) { rollLog('send message success: ' + message.localMsgId); } })(); rollLog('start send message ...'); ChatClient.getInstance() .chatManager.sendMessage(msg, callback) .then(() => { rollLog('send message: ' + msg.localMsgId); }) .catch(reason => { rollLog('send fail: ' + JSON.stringify(reason)); }); }; // UI 组件渲染。 return ( <SafeAreaView> <View style={styles.titleContainer}> <Text style={styles.title}>{title}</Text> </View> <ScrollView> <View style={styles.inputCon}> <TextInput multiline style={styles.inputBox} placeholder="Enter appkey" onChangeText={text => setAppKey(text)} value={appKey} /> </View> <View style={styles.buttonCon}> <Text style={styles.btn2} onPress={init}> INIT SDK </Text> </View> <View style={styles.inputCon}> <TextInput multiline style={styles.inputBox} placeholder="Enter username" onChangeText={text => setUsername(text)} value={username} /> </View> <View style={styles.inputCon}> <TextInput multiline style={styles.inputBox} placeholder="Enter password" onChangeText={text => setPassword(text)} value={password} /> </View> <View style={styles.buttonCon}> <Text style={styles.eachBtn} onPress={registerAccount}> SIGN UP </Text> <Text style={styles.eachBtn} onPress={loginWithPassword}> SIGN IN </Text> <Text style={styles.eachBtn} onPress={logout}> SIGN OUT </Text> </View> <View style={styles.inputCon}> <TextInput multiline style={styles.inputBox} placeholder="Enter the username you want to send" onChangeText={text => setUserId(text)} value={userId} /> </View> <View style={styles.inputCon}> <TextInput multiline style={styles.inputBox} placeholder="Enter content" onChangeText={text => setContent(text)} value={content} /> </View> <View style={styles.buttonCon}> <Text style={styles.btn2} onPress={sendmsg}> SEND TEXT </Text> </View> <View> <Text style={styles.logText} multiline={true}> {logText} </Text> </View> <View> <Text style={styles.logText}>{}</Text> </View> <View> <Text style={styles.logText}>{}</Text> </View> </ScrollView> </SafeAreaView> );};// 设置 UI。const styles = StyleSheet.create({ titleContainer: { height: 60, backgroundColor: '#6200ED', }, title: { lineHeight: 60, paddingLeft: 15, color: '#fff', fontSize: 20, fontWeight: '700', }, inputCon: { marginLeft: '5%', width: '90%', height: 60, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: '#ccc', }, inputBox: { marginTop: 15, width: '100%', fontSize: 14, fontWeight: 'bold', }, buttonCon: { marginLeft: '2%', width: '96%', flexDirection: 'row', marginTop: 20, height: 26, justifyContent: 'space-around', alignItems: 'center', }, eachBtn: { height: 40, width: '28%', lineHeight: 40, textAlign: 'center', color: '#fff', fontSize: 16, backgroundColor: '#6200ED', borderRadius: 5, }, btn2: { height: 40, width: '45%', lineHeight: 40, textAlign: 'center', color: '#fff', fontSize: 16, backgroundColor: '#6200ED', borderRadius: 5, }, logText: { padding: 10, marginTop: 10, color: '#ccc', fontSize: 14, lineHeight: 20, },});export default App;注：须要再登录胜利当前进行绑定
四、推送测试
1、push测试
如何查看绑定的证书信息：
登录环信console--->即时推送--->找到对应的用户id--->点击查看用户绑定推送证书（如下图）
如何测试推送
登录环信console---> 即时推送--->填写相干的内容--->发送预览--->确认推送
收到推送
2、离线音讯测试
登录环信console---> 即时通讯--->用户治理--->找到对应的用户id--->发送rest 音讯
至此，ReactNative 推送集成实现。