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

万少

发布于 2025-02-11 14:41:53

3900

代码可运行

文章被收录于专栏：万少的技术分享

运行总次数：0

代码可运行

react-native 的版本为 0.61.5

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

jmessage-react-plugin的github地址

极光推送 react-native 版本

安装依赖

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

配置

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>

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
    }
}

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

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

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

在根组件中进行测试 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;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-02-11，如有侵权请联系 cloudcommunity@tencent.com 删除