1. 程式人生 > >react-native從頭開始封裝三方sdk(二)

react-native從頭開始封裝三方sdk(二)

完成了第一步,下面開始飛。
以整合騰訊信鴿推送為例

註冊信鴿申請應用等按照騰訊文件來即可。(注意包名要是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

這樣就飛起來了。
這裡寫圖片描述