安装

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

配置

1.自动配置

react-native link 

根据提示，输入 appKey 等即可。

自动配置完成后，需检查是否配置正确，具体请看手动配置内容

2.手动配置

Ios

在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional

在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径

$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule

在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态

Android

检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

your react native project/android/app/build.gradle

...

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

}

检查 android 项目下的 settings.gradle 配置有没有包含以下内容：

settings.gradle

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

检查一下 app 下的 AndroidManifest 配置，有没有增加 部分。

your react native project/android/app/AndroidManifest.xml

image

现在重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

RN 0.29.0 以下版本

打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：

app/MainActivity.java

RN 0.29.0 以上版本

打开 app 下的 MainApplication.java 文件，然后加入 JPushPackage

app/MainApplication.java

image

import cn.jpush.reactnativejpush.JPushPackage;   // <--   导入 JPushPackage
  public class MainApplication extends Application implements ReactApplication {
   // 设置为 true 将不会弹出 toast
   private boolean SHUTDOWN_TOAST = false;
   // 设置为 true 将不会打印 log
   private boolean SHUTDOWN_LOG = false;
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override

        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override

        protected String getJSMainModuleName() {         // rn 0.49 后修改入口为 index
           return "index";
        }

        @Override

        protected List getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)   //  <-- 添加 JPushPackage
            );
        }
    };

  @Override

  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override

  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

import JPushModule 
import JPushModule from 'jpush-react-native';

...

// example

componentDidMount() {
   JPushModule.notifyJSDidLoad();
   JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    })
  }

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