基于 2019-06-07 為止的 JPush 3.3.2 版本

1. 申請極光開發(fā)賬號
2. 生成項目，獲取 AppKey
3. 安裝 React-Native 并初始化項目

在 React-Native 項目目錄下操作

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

react-native link

# 然后輸入 AppKey

然后程序自動把對應(yīng)的 project/android/app/build.gradle project/android/settings.gradle 的配置自動寫入

檢查配置

project/android/app/build.gradle

android {
    ...
    defaultConfig {
        applicationId "yourApplicationId"
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", // 程序自動填充的 AppKey
                APP_CHANNEL : "default"     // 程序自動填充應(yīng)用渠道號
        ]
    }
}
dependencies {
    ...
    implementation project(':jcore-react-native')
    implementation project(':jpush-react-native')
    ...
}

project/android/settings.gradle

rootProject.name = 'rootProject' // 項目的 rootProject

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')

project/android/app/AndroidManifest.xml

<application
    ...
    <!-- Required . Enable it you can get statistics data with channel -->
    <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
    <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
</application>

React-Native 加入 JPushPackage

這里只記錄 RN 0.29.0 以上版本

打開 app 下的 MainApplication.java 文件，加入 JPushPackage

public class MainApplication extends Application implements ReactApplication {
    // 設(shè)置為 true 將不彈出 toast
    private boolean SHUTDOWN_TOAST = false;
    // 設(shè)置為 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)
            );
        }
    };

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        JPushInterface.init(this); // 在這里初始化
    }
}

project/android/app/src/java/.../MainActivity.java 做一些生命周期

public class MainActivity extends ReactActivity {
    ...
    @Override
    protected void onPause() {
        super.onPause();
        JPushInterface.onPause(this);
    }

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

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

Java 配置完畢，可以在 js 中調(diào)用了

import JPushModule from 'jpush-react-native';

...
type Props = {};
export default class App extends Component<Props> {
  componentDidMount() {
    // 新版本必需寫回調(diào)函數(shù)
    // 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);
      // 可執(zhí)行跳轉(zhuǎn)操作，也可跳轉(zhuǎn)原生頁面
      // this.props.navigation.navigate("SecondActivity");
    });
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }
  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>
      </View>
    );
  }
}

好了，啟動 APP，在極光的后臺推送消息試試。

參考

• http://www.itdecent.cn/p/a71512a8f921
• 原文