react-native從頭開始封裝三方sdk(二)
阿新 • • 發佈:2019-02-09
完成了第一步,下面開始飛。
以整合騰訊信鴿推送為例
註冊信鴿申請應用等按照騰訊文件來即可。(注意包名要是app的包名不是library的包名)
ps:按照手動配置的方式出現support-v4重複引用問題,嘗試多種方式沒有解決。暫且放棄。
使用jcenter配置的方式
最終配置結果:
testlibrary下的build.gradle
apply plugin: 'com.android.library'
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
repositories{
jcenter()
mavenCentral()
maven { url 'https://maven.google.com' }
}
defaultConfig {
minSdkVersion 16
targetSdkVersion 23
versionCode 1
versionName "1.0"
ndk {
abiFilters 'armeabi', 'armeabi-v7a', 'arm64-v8a'
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(include: ['*.jar' ], dir: 'libs')
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:+'
//信鴿jar
compile 'com.tencent.xinge:xinge:3.2.3-release'
//wup包
compile 'com.tencent.wup:wup:1.0.0.E-release'
//mid包
compile 'com.tencent.mid:mid:4.0.6-release'
}
app下的build.gradle新增manifestPlaceholders
配置完可以看到依賴的包
然後修改TestModule,新增一個獲取token的方法
package com.witty.testlibrary;
import android.support.annotation.Nullable;
import android.util.Log;
import android.widget.Toast;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.tencent.android.tpush.XGIOperateCallback;
import com.tencent.android.tpush.XGPushConfig;
import com.tencent.android.tpush.XGPushManager;
/**
* Created by asus on 2018-06-28.
*/
public class TestModule extends ReactContextBaseJavaModule {
protected ReactApplicationContext context;
public TestModule(ReactApplicationContext reactApplicationContext){
super(reactApplicationContext);
context = reactApplicationContext;
}
/*
* 實現getName方法,返回值即js中的呼叫方法名
* */
@Override
public String getName() {
return "Test";
}
/**
*傳遞訊息給JS
*/
protected void sendEvent(String eventName,@Nullable WritableMap params) {
context
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
/*
* 定義一個方法,獲取應用包名
* */
@ReactMethod
public void getPackageName(){
String name = getReactApplicationContext().getPackageName();
Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
}
@ReactMethod
public void setDebug(){
XGPushConfig.enableDebug(context,true);
}
@ReactMethod
public void registerPush(){
XGPushManager.registerPush(context, new XGIOperateCallback() {
@Override
public void onSuccess(Object data, int flag) {
//token在裝置解除安裝重灌的時候有可能會變
Log.d("TPush", "註冊成功,裝置token為:" + data);
WritableMap params = Arguments.createMap();
params.putString("token", "註冊成功,裝置token為:" + data);
sendEvent("registerPush", params);
}
@Override
public void onFail(Object data, int errCode, String msg) {
Log.d("TPush", "註冊失敗,錯誤碼:" + errCode + ",錯誤資訊:" + msg);
WritableMap params = Arguments.createMap();
params.putString("token", "註冊失敗,錯誤碼:" + errCode + ",錯誤資訊:" + msg);
sendEvent("registerPush", params);
}
});
}
}
最後修改App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
NativeModules,
DeviceEventEmitter
} from 'react-native';
const {Test} = NativeModules
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
constructor(props){
super(props)
DeviceEventEmitter.once('registerPush',res=>{
alert(res.token)
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<Button
onPress={()=>Test.registerPush()}
title="獲取token"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
執行react-native run-android
這樣就飛起來了。