官網: https://www.jiguang.cn/

github: https://github.com/jpush/jpush-react-native

安裝: 

yarn add jpush-react-native jcore-react-native

或者

npm install jpush-react-native --save

npm install jcore-react-native --save

自動配置:

react-native link    或者     

react-native link jpush-react-native

react-native link jcore-react-native

輸入在極光官網所建立的應用名稱的 appKey

手動配置(Android):

1、settings.gradle

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

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

2、build.gradle(app)

defaultConfig {
    applicationId "yourApplicationId" //此處改成你在極光官網上申請應用時填寫的包名
    ...
    manifestPlaceholders = [
        JPUSH_APPKEY: "yourAppKey", //在此替換你的 APPKey
        APP_CHANNEL : "default" //應用渠道號, 預設即可
    ]
    ...
}

dependencies {
    ...
    compile project(':jpush-react-native')  // 新增 jpush 依賴
    compile project(':jcore-react-native')  // 新增 jcore 依賴
    ...
}
 

3、AndroidManifest.xml

<application
    ...
    <meta-data
        android:name="JPUSH_APPKEY"
        android:value="${JPUSH_APPKEY}" />
    <meta-data
        android:name="JPUSH_CHANNEL"
        android:value="${APP_CHANNEL}" />
</application>

 4、MainApplication.java 檔案，然後加入 JPushPackage，可參考 demo

    // 設定為 true 將不彈出 toast
    private boolean SHUTDOWN_TOAST = false;
    // 設定為 true 將不列印 log
    private boolean SHUTDOWN_LOG = false;

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
            );
        }
    };

 5、MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    JPushInterface.init(this);
}

@Override
protected void onPause() {
    super.onPause();
    JPushInterface.onPause(this);
}

@Override
protected void onResume() {
    super.onResume();
    JPushInterface.onResume(this);
}

@Override
protected void onDestroy() {
    super.onDestroy();
}

ios：link 成功之後：

Libraries資料夾下多出

在 Build Phases 裡的 Link Binary With Libararies 下會多出以下依賴

在 AppDelegate.h 檔案中 匯入標頭檔案

static NSString *appKey = @"appkey";     //填寫appkey
static NSString *channel = @"nil";    //填寫channel   一般為nil
static BOOL isProduction = false;  //填寫isProdurion  平時測試時為false ，生產時填寫true

在AppDelegate.m中的didFinishLaunchingWithOptions下新增

  ------  新增的內容開始  ------
  JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];
  entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;
  [JPUSHService registerForRemoteNotificationConfig:entity delegate:self];
  ------  新增的內容結束  ------
  [JPUSHService setupWithOption:launchOptions appKey:@"8d8c4ffead4718717efb756d"
                        channel:nil apsForProduction:nil];

在Capabilities 下開啟 Push Notifications

證書的配置參考：https://docs.jiguang.cn/jpush/client/iOS/ios_cer_guide/

使用：

import JPushModule from 'jpush-react-native';

...

componentDidMount() {
    // 新版本必需寫回調函式
    // JPushModule.notifyJSDidLoad();
    JPushModule.notifyJSDidLoad((resultCode) => {
        if (resultCode === 0) {}
    });

    // 接收自定義訊息
    JPushModule.addReceiveCustomMsgListener((message) => {
        this.setState({pushMsg: message});
    });
    // 接收推送通知
    JPushModule.addReceiveNotificationListener((message) => {
        console.log("receive notification: " + message);
    });
    // 開啟通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
        console.log("Opening notification!");
        console.log("map.extra: " + map.extras);
        // 可執行跳轉操作，也可跳轉原生頁面
        // this.props.navigation.navigate("SecondActivity");
    });
}

componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
}