React Native 实现原生功能的调用

date

Jun 28, 2023

slug

React Native 实现原生功能的调用

status

Published

1、RN可以使用原生暴露的模块来使用原生的方法或者view。

（1 、以iOS为例，使用原生的方法，可以通过一个暴露的原生模块来实现。如iOS新建一个类继承NSObject实现 RCTBridgeModule 协议，在类实现文件里添加 RCT_EXPORT_MODULE() 的宏，标记自己是个准备给js调用的模块，这里可以传模块名，默认为类名。然后通过RCT_EXPORT_METHOD()或RCT_REMAP_METHOD()暴露方法给到js调用，结果可以通过block回调，也可以是返回一个Promise。在js层通过 NativeModules.模块名.方法名 来调用。

（2、使用原生view ,可以实现一个原生UI模块到RN端使用。新建类继承 RCTViewManager 实现RCTBridgeModule协议，类里比普通模块多实现-(UIView *)view方法，返回一个原生组件的UIView实例。ReactJS 层使用时先使用 requireNativeComponent 方法引进，就可以在js层使用原生暴露的view了。

2、RN和原生的通信可以有以下几种方式

（1、从原生组件传递属性到 RN，在使用RCTRootView将 RN 视图封装到原生组件中，可以在 init 方法里传递 props到 RN注册的组件，使用组件props获取，类似子组件获取父组件的传值。

（2、从 RN 传递属性到原生组件，在创建要暴露给RN的原生组件中，可以使用 RCT_CUSTOM_VIEW_PROPERTY 来接收RN传递到原生组件的属性值，RN使用时和在设置普通组件属性方法一致。

（3、从原生代码调用 RN 函数，在原生模块中通过 bridge.eventDispatcher 的 sendAppEventWithName 方法发送事件，在js端通过NativeAppEventEmitter

监听事件并实现回调，则实现了native 到 js 层的调用。

（4、从 RN 中调用原生方法，在暴露原生模块中，使用RCT_EXPORT_MODULE()或RCT_REMAP_METHOD()可暴露给到RN调用的方法。