美文网首页推送
react-native调用OC原生

react-native调用OC原生

作者: HT_Jonson | 来源:发表于2017-07-13 11:43 被阅读108次

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

    首先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);
    

    相关文章

      网友评论

        本文标题:react-native调用OC原生

        本文链接:https://www.haomeiwen.com/subject/judwhxtx.html