react native 原生模塊橋接的簡單說明小結
Android
創(chuàng)建原生模塊包
- 通過繼承 ReactPackage 為你的原生模塊包創(chuàng)建 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;
}
創(chuàng)建原生模塊
先通過繼承 ReactContextBaseJavaModule 創(chuàng)建 MyNativeModule 類。
public class MyNativeModule extends ReactContextBaseJavaModule {
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}
為了讓 React Native 在 NativeModules 中找到我們的模塊,我們還需要覆蓋 getName 方法。
@Override
public String getName() {
return "MyNativeModule";
}
現(xiàn)在我們已經(jīng)擁有一個可以導入到 JavaScript 代碼的原生模塊,現(xiàn)在可以向其中加入功能。
暴露模塊方法:定義一個接受設置參數(shù)、成功回調(diào)和失敗回調(diào)的 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 中調(diào)用模塊方法
import { NativeModules } from 'react-native'
const { MyNativeModule } = NativeModules
MyNativeModule.Show(
{}, //Config Parameters
() => {}, //Success Callback
() => {} //Cancel Callback
)
注意:
模塊方法只提供靜態(tài)引用,不包含于 react 樹中。
創(chuàng)建原生 UI 組件
如果你需要在 react 樹中渲染一個原聲 UI 組件
創(chuàng)建一個繼承 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 包裹的自定義原生組件
}
創(chuàng)建原生 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 注冊你的模塊。參數(shù) 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
創(chuàng)建原生模塊包
我們需要在項目中添加兩個文件:頭文件和源文件。
- MyNativePackage.h #import "RCTBridgeModule.h" @interface MyNativePackage : NSObject <RCTBridgeModule> @end - MyNativePackage.m #import "MyNativePackage.h" @implementation MyNativePackage RCT_EXPORT_MODULE(); @end
創(chuàng)建模塊方法
RCT_EXPORT_METHOD(Show:(RCTResponseSenderBlock)callback) {
}
JavaScript 中引入模塊方法
import { NativeModules } from 'react-native'
const MyNativeModule = NativeModules.MyNativeModule
MyNativeModule.Show(() => {})
創(chuàng)建原生 View 組件
創(chuàng)建 view 方法,返回你的原聲組件
- (UIView *)view {
//Initialize & return your native component view
}
創(chuàng)建原生 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}>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
React.js入門實例教程之創(chuàng)建hello world 的5種方式
React 是近期非常熱門的一個前端開發(fā)框架。應用非常廣泛,接下來通過本文給大家介紹React.js入門實例教程之創(chuàng)建hello world 的5種方式 ,需要的朋友參考下吧2016-05-05
React+TypeScript+webpack4多入口配置詳解
這篇文章主要介紹了React+TypeScript+webpack4多入口配置詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn)
本文主要介紹了React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價值,感興趣的可以了解一下2023-10-10

