推送

react-native调用OC原生

2017-07-13  本文已影响108人  HT_Jonson

一直想学学这一块东西.但是感觉要对底层非常了解.
所以一直拖延了下来.
现在有时间,就简单的先传值开始

首先RN调用OC

在Xcode 创建一个类.

image.png

在TestOBJ.h里导入

image.png

这里也需要注意下根据版本不同,有些同学会报错
你也可以改成

#import "RCTBridgeModule"

引入:#import “RCTBridgeModule.h” 且使用 <RCTBridgeModule> 接口

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

RCT_EXPORT_MODULE();
 
//桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的,所以要返回结果给Javascript,必须通过回调或者触发事件来进行
RCT_EXPORT_METHOD(j2oFun1:(NSString *)dataString dateNumber:(int)dateNumber)
{
    NSLog(@"js call iOS function j2oFun1\n dataString: %@ |dateNumber :%d",dataString,dateNumber);
}

想要将oc的函数导出给js进行调用,那么就需要进行声明。声明通过RCT_EXPORT_METHOD()宏来实现:

j2oFun1:函数名,后续是两个参数,分别是NSString 和 int 类型数据。

调用成功后,我们输出这两个传来的值到控制台。

下面我们再看看RN JS的代码

随便穿件一个界面,然后写一个点击方法.
这里我就不截图了.

//将OC注册进来的模块取出
var Jto = require('react-native').NativeModules.TestOBJ;
//在你点击事件里写上如下代码,然后再xcode控制台看看是否调用成功
Jto.j2oFun1('Jonson',22);
image.png

还是比较简单的.
后面再看下如何调用OC 页面.有时间再更新,

下面是RN调用控iOS跳转控制器

AppDelegate.h

@property (nonatomic,strong)UINavigationController *nav;

AppDelegate.m文件里添加

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
//  self.window.rootViewController = rootViewController;



//添加如下2行代码
  _nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];
  
  self.window.rootViewController = _nav;




  [self.window makeKeyAndVisible];

接下来创建一个控制器;
OneController

下面是项目结构图

image.png

TestOBJ.m文件里添加如下代码,以前的方法可以不用动

//对了这里说明下,这里一定要使用主线程.否则会不成功
dispatch_async(dispatch_get_main_queue(), ^{
    OneViewController *one = [[OneViewController alloc]init];
    
    AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    
    [app.nav pushViewController:one animated:YES];
  });

下面是RN的代码了

//继续使用上次测试代码,发现可以跳转了.
Jto.j2oFun1('Jonson',22);
上一篇 下一篇

猜你喜欢

热点阅读