在Rn中简单集成激光推送

最近由于公司需求，需要配合rn开发人员进行集成一些三方的sdk，rn的话我也不是太熟练，然后今天就记录一下集成激光推送的步骤。
官方地址是https://github.com/jpush/jpush-react-native#api。
但是运行它的官方的demo的时候，js里面下载的一些包一直找不到，然后经过排查，可能是写法有问题，然后就自己创建了一个新的界面进行集成的，就只集成了初始化，后续没做处理，步骤和原生基本没有多大的区别。
首先在官方创建好激光账号和应用名称，设置好包名和appkey。
然后在cmd中指向rn路径，分别去添加激光的引用类。就是原生之前添加了许多的so文件，这里好像不需要，已经集成好了的，然后直接在build里面添加引用就行了。前面的操作步骤和官网基本相同，就是面的js里面的写法我感觉有点差别。

npm install jpush-react-native --save
npm install jcore-react-native --save

1.自动配置部分（以下命令均在你的 React Native Project 目录下运行，自动配置后仍需手动配置一部分）

执行脚本
npm run configureJPush <yourAppKey> <yourModuleName>
//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，
//如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)
//举个例子:
npm run configureJPush d4ee2375846bc30fa51334f5 app
Link 项目
//执行自动配置脚本后再执行 link 操作
react-native link

Android 手动操作部分 （3个步骤）

修改 app 下的 build.gradle 配置：
your react native project/android/app/build.gradle
android {
    defaultConfig {
        applicationId "yourApplicationId"
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号
        ]
    }
}
...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

//然后引用之后，build 和setting里面应该是下面的这种

这里以为之前jc没有引用进来，一直包类找不到，我以为是我so文件丢失了，然后把原生的全部丢进去了。应该是不需要的，然后abiFilters 后面只要写入前两个就行了。

然后setting里面就是要显示这种，确认引用进来了。

这里是application 的写法。
然后程序启动页和原生一样，调用激光的init方法

接下来就是js里面去调用激光的初始化了。
这也是我第一次实际接触rn，然后只知道一些跳转和指向。这边是直接跳转的他的启动页。官方给出的是跳转到他的设置界面，但是他界面里面写法我这边有问题，所以就自己重新创建的。

//在这个界面我就设置了一个初始化，然后我这边成功的接收到了控制台推送过来的消息，之后的一些设置标签和别名，应该和原生的逻辑一样了，以后再在项目中实际进行操作。

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text, TouchableHighlight,
    View,Alert
} from 'react-native';
import JPushModule from 'jpush-react-native';

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',
});

export default class App extends Component<{}> {

    constructor(props) {
        super(props);

        this.state = {
            bg: '#ffffff',
            appkey: 'AppKey',
            imei: 'IMEI',
            package: 'PackageName',
            deviceId: 'DeviceId',
            version: 'Version',
            pushMsg: 'PushMessage',
            registrationId: 'registrationId',
        };

        this.onInitPress = this.onInitPress.bind(this);
    }

    onInitPress() {
        JPushModule.initPush();
        Alert.alert("提示","初始化激光推送");
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    underlayColor='#0866d9'
                    activeOpacity={0.5}
                    style={styles.container}
                    onPress={this.onInitPress}>
                <Text style={styles.welcome}>
                    Welcome to React Native!ghdhgd
                </Text>
                </TouchableHighlight>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
            </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,
    },
});

下面是官方给出的demo 他这边继承的 React.Component，我这边一直找不到，更换了react 和react-native的版本都不行，之后我看了他的app里面的写法是 extends Component<{}>，我觉得替换成这个样子应该可以。以上推送基本就集成了。

'use strict';

import React from 'react';
import {
    Text,
    View,
    TextInput,
    TouchableHighlight,
    PropTypes,
    requireNativeComponent,
    NativeModules,
    ScrollView,
    StyleSheet,
    DeviceEventEmitter,
} from 'react-native';


import JPushModule from 'jpush-react-native';

const receiveCustomMsgEvent = "receivePushMsg";
const receiveNotificationEvent = "receiveNotification";
const openNotificationEvent = "openNotification";
const getRegistrationIdEvent = "getRegistrationId";
export default class PushActivity extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            bg: '#ffffff',
            appkey: 'AppKey',
            imei: 'IMEI',
            package: 'PackageName',
            deviceId: 'DeviceId',
            version: 'Version',
            pushMsg: 'PushMessage',
            registrationId: 'registrationId',
        };

        this.jumpSetActivity = this.jumpSetActivity.bind(this);
        this.onInitPress = this.onInitPress.bind(this);
        this.onStopPress = this.onStopPress.bind(this);
        this.onResumePress = this.onResumePress.bind(this);
        this.onGetRegistrationIdPress = this.onGetRegistrationIdPress.bind(this);
        this.jumpSecondActivity = this.jumpSecondActivity.bind(this);
    }

    jumpSetActivity() {
        this.props.navigation.navigate("Setting");
    }

    jumpSecondActivity() {
        console.log("jump to SecondActivity");
        // JPushModule.jumpToPushActivityWithParams("SecondActivity", {
        //  hello: "world"
        // });
        this.props.navigation.navigate("Push");
    }

    onInitPress() {
        JPushModule.initPush();
    }

    onStopPress() {
        JPushModule.stopPush();
        console.log("Stop push press");
    }

    onResumePress() {
        JPushModule.resumePush();
        console.log("Resume push press");
    }

    onGetRegistrationIdPress() {
        JPushModule.getRegistrationID((registrationId) => {
            this.setState({
                registrationId: registrationId
            });
        });
    }

    componentWillMount() {
    }

    componentDidMount() {
        JPushModule.getInfo((map) => {
            this.setState({
                appkey: map.myAppKey,
                imei: map.myImei,
                package: map.myPackageName,
                deviceId: map.myDeviceId,
                version: map.myVersion
            });
        });
        JPushModule.notifyJSDidLoad((resultCode) => {
            if (resultCode === 0) {
            }
        });
        JPushModule.addReceiveCustomMsgListener((map) => {
            this.setState({
                pushMsg: map.message
            });
            console.log("extras: " + map.extras);
        });
        JPushModule.addReceiveNotificationListener((map) => {
            console.log("alertContent: " + map.alertContent);
            console.log("extras: " + map.extras);
            // var extra = JSON.parse(map.extras);
            // console.log(extra.key + ": " + extra.value);
        });
        JPushModule.addReceiveOpenNotificationListener((map) => {
            console.log("Opening notification!");
            console.log("map.extra: " + map.extras);
            this.jumpSecondActivity();
            // JPushModule.jumpToPushActivity("SecondActivity");
        });
        JPushModule.addGetRegistrationIdListener((registrationId) => {
            console.log("Device register succeed, registrationId " + registrationId);
        });
        // var notification = {
        //  buildId: 1,
        //  id: 5,
        //  title: 'jpush',
        //  content: 'This is a test!!!!',
        //  extra: {
        //      key1: 'value1',
        //      key2: 'value2'
        //  },
        //  fireTime: 2000,
        // }
        // JPushModule.sendLocalNotification(notification);
    }

    componentWillUnmount() {
        JPushModule.removeReceiveCustomMsgListener(receiveCustomMsgEvent);
        JPushModule.removeReceiveNotificationListener(receiveNotificationEvent);
        JPushModule.removeReceiveOpenNotificationListener(openNotificationEvent);
        JPushModule.removeGetRegistrationIdListener(getRegistrationIdEvent);
        console.log("Will clear all notifications");
        JPushModule.clearAllNotifications();
    }

    render() {
        return (
            <ScrollView style={styles.parent}>

                <Text style={styles.textStyle}>
                    {this.state.appkey}
                </Text>
                <Text style={styles.textStyle}>
                    {this.state.imei}
                </Text>
                <Text style={styles.textStyle}>
                    {this.state.package}
                </Text>
                <Text style={styles.textStyle}>
                    {this.state.deviceId}
                </Text>
                <Text style={styles.textStyle}>
                    {this.state.version}
                </Text>
                <TouchableHighlight
                    underlayColor='#0866d9'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.jumpSetActivity}>
                    <Text style={styles.btnTextStyle}>
                        设置
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    underlayColor='#0866d9'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.onInitPress}>
                    <Text style={styles.btnTextStyle}>
                        INITPUSH
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    underlayColor='#e4083f'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.onStopPress}>
                    <Text style={styles.btnTextStyle}>
                        STOPPUSH
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    underlayColor='#f5a402'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.onResumePress}>
                    <Text style={styles.btnTextStyle}>
                        RESUMEPUSH
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    underlayColor='#f5a402'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.onGetRegistrationIdPress}>
                    <Text style={styles.btnTextStyle}>
                        GET REGISTRATIONID
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    underlayColor='#f5a402'
                    activeOpacity={0.5}
                    style={styles.btnStyle}
                    onPress={this.jumpSecondActivity}>
                    <Text style={styles.btnTextStyle}>
                        Go to SecondActivity
                    </Text>
                </TouchableHighlight>
                <Text style={styles.textStyle}>
                    {this.state.pushMsg}
                </Text>
                <Text style={styles.textStyle}>
                    {this.state.registrationId}
                </Text>
            </ScrollView>

        )
    }
}

var styles = StyleSheet.create({
    parent: {
        padding: 15,
        backgroundColor: '#f0f1f3'
    },

    textStyle: {
        marginTop: 10,
        textAlign: 'center',
        fontSize: 20,
        color: '#808080'
    },

    btnStyle: {
        marginTop: 10,
        borderWidth: 1,
        borderColor: '#3e83d7',
        borderRadius: 8,
        backgroundColor: '#3e83d7'
    },
    btnTextStyle: {
        textAlign: 'center',
        fontSize: 25,
        color: '#ffffff'
    },
    inputStyle: {
        borderColor: '#48bbec',
        borderWidth: 1,

    },
});