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

564 阅读2分钟

接上一篇无星的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地址:github.com/XingXiaoWu/…

二、回调函数CallBack的使用

无星的RN学习之旅(一)-环境安装以及新建项目

无星的RN学习之旅(三)

无星的RN学习之旅(四)——通信、持久化存储、xcode打包

无星的RN学习之旅(五)-关于react-navigation多层级页面返回时,去掉逐层推出动画

无星的RN学习之旅(六)-第三方App跳转,苹果商店跳转,loading框