@alivepush/react-native-xg

react-native-xg

react-native-xg封装了信鸽的推送API,集成了ios,android(包括华为,小米,魅族)的推送功能.

• react-native-xg测试使用的是react-native@0.44.0进行测试的,如果在其他版本使用中有问题请在issues中说明
• android使用的信鸽版本为com.tencent.xinge:xinge:3.2.4-beta,对应的版本号可以在android/build.gradle中查看
• 文档请参考API Document & Examples
• app demo

Getting started

$ npm install @alivepush/react-native-xg --save

Mostly automatic installation

$ react-native link @alivepush/react-native-xg

Manual installation

iOS

• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-xg and add RNReactNativeXg.xcodeproj
• In XCode, in the project navigator, select your project. Add libRNReactNativeXg.a to your project's Build Phases ➜ Link Binary With Libraries
• Run your project (Cmd+R)<

Android

• Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.alivepush.xg.RNReactNativeXgPackage; to the imports at the top of the file
• Add new RNReactNativeXgPackage() to the list returned by the getPackages() method

• Append the following lines to android/settings.gradle:

  include ':react-native-xg'
  project(':react-native-xg').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-xg/android')
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-xg')
  

集成

android配置

修改build.gradle配置文件

android {
    defaultConfig {
        manifestPlaceholders = [
            //可选填,可以通过代码进行设置
            XG_ACCESS_ID : "",
            //可选填,可以通过代码进行设置
            XG_ACCESS_KEY: "",
            //可选填,如果需要使用华为推送就必须填写
            HW_APPID     : "",
            //可选填,如果需要使用小米推送就必须填写
            PACKAGE_NAME : ""
        ]
    }
}

React Native 实现

使用快速注册接口

import React,{Component} from "react"
import {View} from "react-native"
import xg from '@alivepush/react-native-xg'

class App extends Component{
    render(){
        //do something
    }
    componentDidMount(){
        /*
          默认开启第三方推送服务
          如果accessid和accesskey已经配置过了,可以直接传递null
          如:

          xg.register("miAppId","miAppKey","mzAppId","mzAppKey",null,null,debug,(token,code)=>{
              console.log(`code=${code},token=${token}`);
          })

        */
        xg.register("miAppId","miAppKey","mzAppId","mzAppKey","access_id","access_key",debug,(token,code)=>{
            console.log(`code=${code},token=${token}`);
        })
    }
}

单步实现信鸽推送

import React,{Component} from "react"
import {View} from "react-native"
import xg from '@alivepush/react-native-xg'

class App extends Component{
    render(){
        //do something
    }
    componentDidMount(){

        //开启日志
        //PS:当发布到生产环境时最好不要开启日志
        //这里其实可以根据环境变量来确定是否开启日志
        //xg.enableDebug(process.env.NODE_ENV==="development");
        xg.enableDebug(true);

        //设置access id
        xg.setAccessId("ACCESS_ID");

        //设置access key
        xg.setAccessKey("ACCESS_KEY");

        //如果需要监听注册的回调有两种方式
        //第一种:xg.addListener("registerresult",()=>{})
        //第二种:xg.registerPush(()=>{});
        //这里我们使用第一种
        const listener=xg.addListener("registerresult",(...args)=>{
            listener.remove();
            console.log("注册结果",args);
        })

        //开始注册
        xg.registerPush();

        //如果我们是点击通知栏触发的app启动需要监听`fetchLastClickMessage`
        xg.fetchLastClickMessage(message=>{
            //可以处理通知栏过来的消息
        });
    }
}