布丁与画家的博客

__IWH718

今日诗词
QQ交流群:914105779
  menu

【IWH冬@react-native】编写原生模块给JS进行交互,一键加群的实现。

最近一直用RN开发,原生已经小半年没碰过了,需要给Rn的程序加一个一键加群的功能,以往都是用Intent来写,但是RN不支持,查了一下文档,发现有个编写原生模块进行调用的方式,就写了一个加群的模块,很简单,首先去QQ群官网拿到android版的代码【intent的】

1.编写Intent

首先创建一个类:这个是继承rn的一个连接原生的模块。实现一个getName方法,返回值就是我们以后在JS调用的函数名。

然后这个类里面的函数凡是需要在RN调用的都要加上 @ReactMethod注解。比如这里的openGroup

package com.poias

import android.content.Intent
import android.net.Uri
import android.widget.Toast
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

/**
 * 打开QQ群
 */

class OpenQQ(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule() {

    companion object {
        private lateinit  var context: ReactApplicationContext
    }

    init {
        context = reactContext
    }


    override fun getName(): String {

        return "Ktils"

    }

    //打开QQ群
    @ReactMethod
    fun openGroup(): Boolean {
        val intent = Intent()
        val key = "4Zf-J-QomfEhRJUEIaA9XdbPr6xrYEuu"
        intent.data = Uri.parse("mqqopensdkapi://bizAgent/qm/qr?url=http%3A%2F%2Fqm.qq.com%2Fcgi-bin%2Fqm%2Fqr%3Ffrom%3Dapp%26p%3Dandroid%26k%3D$key")
        // 此Flag可根据具体产品需要自定义,如设置,则在加群界面按返回,返回手Q主界面,不设置,按返回会返回到呼起产品界面 //intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
        try {
           context.startActivity(intent)
            return true
        } catch (e: Exception) {
            Toast.makeText(context, "未安装QQ或版本不支持,请手动添加", Toast.LENGTH_LONG).show()
            return false
        }
    }


}

null

2.新建一个类,加入原生包 把刚才的模块加入这个包,这个也是自定义的。

package com.poias

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager
import java.util.*

/**
 * 工具包模块
 */
class KtilsPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {

        return arrayListOf<NativeModule>().apply{
            add(OpenQQ(reactContext))
        }
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> {
        return Collections.emptyList()
    }
}

null

3.这一步很多人在用第三方的包都用过了,在Mainapplication加上这个包

 @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
            //kotlin utils bridge
            packages.add(new KtilsPackage());
          return packages;
        }

null

4.JS调用

import {NativeModules} from 'react-native';
NativeModules.Ktils.openGroup()

null

好了,好久没有写过kotlin,语法都忘完了。唉


标题:【IWH冬@react-native】编写原生模块给JS进行交互,一键加群的实现。
作者:iwh718
地址:看看我的CSDN
文华小姐姐的B站

我的👏布丁与画家公众号

布丁work微信小程序