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

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

1.编写Intent

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

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

package com.poiasimport 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群@ReactMethodfun 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}}}

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

package com.poiasimport 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()}
}

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

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

4.JS调用

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

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

【react-native】编写原生模块给JS进行交互，一键加群的实现。相关推荐

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...
尊重版权,未经授权不得转载本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
React Native调用原生模块
概述有时候App需要访问平台API,但React Native可能还没有相应的模块包装:或者你需要复用一些Java代码,而不是用Javascript重新实现一遍:又或者你需要实现某些高性能的.多线程 ...
Android React Native使用原生UI组件
Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手 ...
React Native与原生的图片交互问题
项目中的一个需求:在原生系统中调用第三方SDK识别身份证后将获取的信息和图片返回到React Native JSX页面上展示. 首先React Native与原生通信的方式可以采用CallBack 和 ...
一款由React Native编写的开源App--Gank
一款由React Native编写的开源App–Gank iOS 效果图: Android 效果图: 更多gif图在文章末尾github链接处. 用到的第三方依赖库 redux react-redux ...
编写原生的Node.js模块
通常,我们开发原生Node.js模块包括但不仅限于以下原因: 对性能有比较苛刻要求的应用.尽管Node.js得益于libuv,在异步I/O操作很有优势,但遇到数字计算时并不是一个很好的选择. 使用更加 ...
React Native之AppRegistry模块
我们在写react native的js的时候,在最后总会加上一段代码: AppRegistry.registerComponent('ReactDemo', () => ReactDemo); ...
android ios 混合编程,React Native与原生（Android、iOS）混编，三端痛点解析
在做RN混编项目的时候或者面试的时候经常会遇到一些问题,总结起来有以下几种: 1.过多的注册RN组件( AppRegistry.registerComponent() ); 2.从原生跳转指定的RN页 ...
使用React Native编写的一款阅读类app ———《轻松一刻》
作者:阿钟博客:http://blog.csdn.net/a_zhon 一款纯React Native原生代码编写的app 源码地址:https://github.com/azhon/Time 效果 ...

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

【react-native】编写原生模块给JS进行交互，一键加群的实现。相关推荐

最新文章

热门文章