react native 原生模块桥接的简单说明小结


Posted in Javascript onFebruary 26, 2019

Android

创建原生模块包

  • 通过继承 ReactPackage 为你的原生模块包创建 Java 类,可以这么写:
  • 覆盖 createNativeModules 和 createViewManagers 方法
public class MyNativePackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
  }
}

在 createNativeModules 方法中添加原生模块

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  List<NativeModule> modules = new ArrayList<>();
  modules.add(new MyNativeModule(reactContext));

  return modules;
}

在 createViewManagers 方法中添加原生 UI 组件

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
  List<ViewManager> components = new ArrayList<>();
  components.add(new RNNativeComponent());

  return components;
}

创建原生模块

先通过继承 ReactContextBaseJavaModule 创建 MyNativeModule 类。

public class MyNativeModule extends ReactContextBaseJavaModule {
  public MyNativeModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
}

为了让 React Native 在 NativeModules 中找到我们的模块,我们还需要覆盖 getName 方法。

@Override
public String getName() {
  return "MyNativeModule";
}

现在我们已经拥有一个可以导入到 JavaScript 代码的原生模块,现在可以向其中加入功能。

暴露模块方法:定义一个接受设置参数、成功回调和失败回调的 Show 方法。

public class MyNativeModule extends ReactContextBaseJavaModule {
  @ReactMethod
  public void Show(ReadableMap config, Callback successCallback, Callback cancelCallback) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      cancelCallback.invoke("Activity doesn't exist");
      return;
    }
  }
}

在 JavaScript 中调用模块方法

import { NativeModules } from 'react-native'

const { MyNativeModule } = NativeModules

MyNativeModule.Show(
 {}, //Config Parameters
 () => {}, //Success Callback
 () => {} //Cancel Callback
)

注意:

模块方法只提供静态引用,不包含于 react 树中。

创建原生 UI 组件

如果你需要在 react 树中渲染一个原声 UI 组件

创建一个继承 ReactNative ViewGroupManager 的 Java 类

public class RNNativeComponent extends ViewGroupManager<ViewGroup> {
  public static final String REACT_CLASS = "RNNativeComponent";
}

覆盖 getName 方法:

@Override
public String getName() {
  return REACT_CLASS;
}

覆盖 createViewInstance 方法,返回你的自定义原生组件

@Override
 protected FrameLayout createViewInstance(final ThemedReactContext reactContext) {
   return //用 FrameLayout 包裹的自定义原生组件
 }

创建原生 prop 方法

@ReactProp(name = "prop_name")
 public void setPropName(NativeComponent nativeComponent, propDataType prop) {
 }

JavaScript 中使用

import { requireNativeComponent } from "react-native"

const MyNativeComponent = requireNativeComponent("RNNativeComponent", RNNativeComponent, {
 nativeOnly: { }
})

<MyNativeComponent prop={this.props.prop}>

iOS

Macro

  • RCTBridgeModule: RCTBridgeModule 是一个 protocol,它为注册 bridge 模块 RCTBridgeModule @protocol RCTBridgeModule 提供了一个接口
  • RCT_EXPORT_MODULE(js_name): 在 class implementation 时使用 bridge 注册你的模块。参数 js_name 是可选的,用作 JS 模块的名称,若不定义,将会默认使用 Objective-C 的 class 名
  • RCT_EXPORT_METHOD(method)RCT_REMAP_METHOD(, method): bridge 模块亦可定义方法,这些方法可以作为 NativeModules.ModuleName.methodName 输出到 JavaScript。
RCT_EXPORT_METHOD(funcName:(NSString *)onlyString
          secondName:(NSInteger)argInteger)
 { ... }

上面的例子暴露到 JavaScript 是 NativeModules.ModuleName.funcName

创建原生模块包

我们需要在项目中添加两个文件:头文件和源文件。

- MyNativePackage.h

#import "RCTBridgeModule.h"

@interface MyNativePackage : NSObject <RCTBridgeModule>
@end

- MyNativePackage.m

#import "MyNativePackage.h"

@implementation MyNativePackage

RCT_EXPORT_MODULE();

@end

创建模块方法

RCT_EXPORT_METHOD(Show:(RCTResponseSenderBlock)callback) {
}

JavaScript 中引入模块方法

import { NativeModules } from 'react-native'

const MyNativeModule = NativeModules.MyNativeModule
MyNativeModule.Show(() => {})

创建原生 View 组件

创建 view 方法,返回你的原声组件

- (UIView *)view {
  //Initialize & return your native component view
}

创建原生 prop 方法

RCT_CUSTOM_VIEW_PROPERTY(prop, DATA_TYPE_OF_PROP, YOUR_NATIVE_COMPONENT_CLASS) {
}

在 JavaScript 中使用

import { requireNativeComponent } from "react-native"

const MyNativeComponent = requireNativeComponent("RNNativeComponent", RNNativeComponent, {
 nativeOnly: { }
})

<MyNativeComponent prop={this.props.prop}>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JS中的防抖与节流及作用详解
Apr 01 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 #Javascript
小程序hover-class点击态效果实现
Feb 26 #Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 #Javascript
vue使用Font Awesome的方法步骤
Feb 26 #Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 #Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 #Javascript
JS实现电话号码的字母组合算法示例
Feb 26 #Javascript
You might like
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
phpfpm的作用和用法
2019/10/10 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
浅析Python3 pip换源问题
2020/01/06 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
金融事务专业毕业生求职信
2014/02/23 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
企业百日安全活动总结
2015/05/07 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Python实现打乒乓小游戏
2021/09/25 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js