jmessage-react-plugin的正确引入方法

react-native 的版本为 0.61.5

由于官网上的使用步骤不够详细，因此将项目中的正确使用摘选出来，方便大家的使用。

jmessage-react-plugin的github地址

极光推送 react-native 版本

1. 安装依赖

   yarn add jmessage-react-plugin jcore-react-native
   

2. 配置

   1. android\app\src\main\AndroidManifest.xml 加入以下代码

            <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
            <!-- 极光的配置 -->
            <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}" />
            <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}" />
            <!-- 极光的配置 -->
          </application>
      

   2. android\app\build.gradle 加入以下代码和按需修改

      android {
          compileSdkVersion rootProject.ext.compileSdkVersion
      
          compileOptions {
              sourceCompatibility JavaVersion.VERSION_1_8
              targetCompatibility JavaVersion.VERSION_1_8
          }
      
          defaultConfig {
              applicationId "com.awesomeproject"
              minSdkVersion rootProject.ext.minSdkVersion
              targetSdkVersion rootProject.ext.targetSdkVersion
              versionCode 1
              versionName "1.0"
              manifestPlaceholders = [
              JPUSH_APPKEY: "你的 appKey",	//在此替换你的APPKey
              APP_CHANNEL: "developer-default"		//应用渠道号
              ]
          }
      

      ---

      dependencies {
          implementation fileTree(dir: "libs", include: ["*.jar"])
          implementation "com.facebook.react:react-native:+"  // From node_modules
          compile project(':jmessage-react-plugin') // 新增的
          compile project(':jcore-react-native')  // 新增的
          if (enableHermes) {
              def hermesPath = "../../node_modules/hermes-engine/android/";
              debugImplementation files(hermesPath + "hermes-debug.aar")
              releaseImplementation files(hermesPath + "hermes-release.aar")
          } else {
              implementation jscFlavor
          }
      }
      

   3. 根目录下新建文件和添加以下配置 react-native.config.js

      module.exports = {
        dependencies: {
          'jmessage-react-plugin': {
            platforms: {
              android: {
                packageInstance: 'new JMessageReactPackage(false)'
              }
            }
          },
        }
      };
      

   4. android\settings.gradle 加入如下配置

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

3. 在 根组件中进行测试 App.js

   import React from 'react';
   import { View, Text } from "react-native";
   import JMessage from "jmessage-react-plugin";
   class App extends React.Component {
     componentDidMount() {
       JMessage.init({
         'appkey': 'key',
         'isOpenMessageRoaming': true,
         'isProduction': false,
         'channel': '' 
       })
   
       JMessage.login({
         username: "名称",
         password: "密码"
       }, (res) => {
         console.log("登录成功");
         console.log(res);
       }, (err) => {
         console.log("登录失败");
         console.log(err);
       })
   
     }
     render() {
       return (
         <View>
           <Text>goods</Text>
         </View>
       );
     }
   }
   export default App;