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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
用javascript控制iframe滚动的代码
Apr 10 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python清理子进程机制剖析
2017/11/23 Python
python 动态加载的实现方法
2017/12/22 Python
python中logging包的使用总结
2018/02/28 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python3排序的实例方法
2020/10/20 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书