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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。