对新手友好的 RN 使用原生ios开发的模块

绝地灬酷狼 2022-12-22 00:47 77阅读 0赞

# 一、首先，我们需要知道我们做好的文件要放在哪里，需要做哪些配置才能生效 #

我们需要先有2个文件（1）CreatCat.h （2）CreatCat.m，随意在哪里创建，最好是放在项目的ios根目录下，比较好找

至于文件内写些什么，我们待会说，先说下有了文件后如何配置！

# 二、配图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70][]

这边是放在RN项目在Xcode上的项目根目录下，与其他库文件是同级的，只需要放在这里，并且在对应的文件里写些代码，就可以正确被JS调用了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1][]

### CreatCat.h ###

#import <Foundation/Foundation.h>
    #import "RCTBridgeModule.h"
     
    @interface CreatCat : NSObject <RCTBridgeModule>
     
    @end

### CreatCat.m（这边我们创建了三个方法供RN调用）cratCat、addEvent、whoName ###

//
    //  CreatCat.m
    //  demo
    //
    //  Created by xieyusheng on 2017/11/10.
    //  Copyright © 2017年 Facebook. All rights reserved.
    //
     
    #import <Foundation/Foundation.h>
    #import "CreatCat.h"
     
    @implementation CreatCat
     
    RCT_EXPORT_MODULE();
     
    RCT_EXPORT_METHOD(cratCat:(NSString *)name sex:(NSString *)sex age:(int)age)
    {
      NSLog(@"我创建了一只名叫%@的猫，性别%@， 今年%d岁", name, sex, age);
    }
     	
    //对外提供调用方法
    RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
      NSLog(@"Pretending to create an event %@ at %@", name, location);
    }
     
    //方法3
    RCT_EXPORT_METHOD(whoName:(NSString *)name age:(int)age location:(NSString *)location){
      NSLog(@"可以的%@,年来%d,还有%@",name,age,location);
    }
     
    @end

### 这边附上[Object-C 函数定义 -- 笔记][Object-C _ --]：[https://www.cnblogs.com/facial/p/4750814.html][Object-C _ --] ###

### 在RN的调用则是 ###

import { NativeModules } from 'react-native';

iosBridgeContactOnPress = () => {
        console.log('NativeModules====>', NativeModules)
        NativeModules.CreatCat && NativeModules.CreatCat.cratCat('小花猫', '母', 3)
    };

### OK 项目跑起来后，可以看到我们打印的原生IOS暴露给RN的类模块以及内部的方法 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2][]

### 成功后 会在XCODE输出打印 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20221120/b83ad1738d7b4a74ae766044eee8b69b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201117100425872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r,size_16,color_FFFFFF,t_70
[Object-C _ --]: https://www.cnblogs.com/facial/p/4750814.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020111710285037.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201117103033572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r,size_16,color_FFFFFF,t_70