无星的RN学习之旅(二)-RN与原生的通信

字数 319阅读 239

接上一篇无星的RN学习之旅(一)最后我给出了一个基础项目地址进行学习。
PS:我使用的是VSCode编译器和Xcode编译器
一、RN如何调用原生方法
1.在新建的项目中打开ios目录下的工程文件,同时使用VSCode打开项目目录。
新建NSObjec对象,名字任意,我这里叫RNruniOS

.h文件添加RCTBridgeModule.h头文件,RCTBridgeModule协议

//RNruniOS.h文件
#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"
@interface RNruniOS : NSObject<RCTBridgeModule>

@end

.m文件添加RCTConvert.h头文件,并添加相应宏

//RNruniOS.m文件
#import "RNruniOS.h"
//RCTConvert提供了一系列辅助函数,用来接收一个JSON值并转换到原生Objective-C类型或类。
#import "React/RCTConvert.h"
@implementation RNruniOS

//为了实现RCTBridgeModule协议,需要包含RCT_EXPORT_MODULE()宏。
//这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。
//如果不指定,默认就会使用这个Objective-C类的名字。
RCT_EXPORT_MODULE()

//通过RCT_EXPORT_METHOD()宏声明要给Javascript导出的方法,否则React Native不会导出任何方法。
RCT_EXPORT_METHOD(RNiOSLog:(NSString*)msg)
{
  NSLog(@"RN调用iOS打印方法信息是%@",msg);
}

@end

2.在rn项目中的index.ios.js文件进行调用

//RN调用iOS原生方法,定义一个变量
var RNruniOS = NativeModules.RNruniOS;
//RN调用原生方法
 RNruniOS.RNiOSLog('RN调用iOS打印方法成功。');

通过xcode进行项目编译,点击相应按钮触发事件即可看见控制台打印输出log信息。
该小练习github地址:https://github.com/XingXiaoWu/RNruniOS

二、回调函数CallBack的使用
无星的RN学习之旅(一)-环境安装以及新建项目
无星的RN学习之旅(三)
无星的RN学习之旅(四)——通信、持久化存储、xcode打包
无星的RN学习之旅(五)-关于react-navigation多层级页面返回时,去掉逐层推出动画
无星的RN学习之旅(六)-第三方App跳转,苹果商店跳转,loading框

推荐阅读更多精彩内容