React Native | 创建IOS原生模块

简介: React Native | 创建IOS原生模块

简单使用

1.创建模块文件

首先用XCode打开我们的项目,然后选中project-> 右击选择"new file",然后根据下图建立class:

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2.RNHello.m

#import "RNHello.h"
#import <React/RCTLog.h>
@implementation RNHello
// To export a module named CalendarManager
RCT_EXPORT_MODULE();
// This would name the module AwesomeCalendarManager instead
// RCT_EXPORT_MODULE(AwesomeCalendarManager);
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
  RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}
@end
复制代码

3.RNHello.h

#import <React/RCTBridgeModule.h>
@interface RNHello : NSObject <RCTBridgeModule>
@end
复制代码

4.使用

import { Button, View, NativeModules } from "react-native";
const test = () => {
  const onNative = () => {
    NativeModules.RNHello.addEvent("sssss", "sssd");
  };
  return (
      <Button title="Native" onPress={onNative} />
  )
}
复制代码

然后用XCode打开我们的项目,运行起来之后点击按钮,可以在XCode控制台看到输出的日志。

Callback

1.将下列代码复制到m文件里

网络异常,图片无法展示
|
将下面的代码复制到文件 RNHello.m文件里:

RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)  
{  
callback(@[@"hello from native ios"]);  
}
复制代码

然后重新运行项目。

更改我们的onNative方法:

const onNative = () => {
-  NativeModules.RNHello.addEvent("sssss", "sssd");
+     NativeModules.RNHello.findEvents((res) => {
+        alert(res);
+     });
};
复制代码

然后点击按钮就会出现一个alert。

相关链接


目录
打赏
0
0
0
0
3
分享
相关文章
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
523 4
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
130 0
React——前端开发中模块与组件【四】
React——前端开发中模块与组件【四】
62 0
React Native 打包 App 发布 iOS 及加固混淆过程
本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混淆过程。
React事件和原生事件的执行顺序
React事件和原生事件的执行顺序
108 0
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
原生js vue react通用的递归函数
原生js vue react通用的递归函数
91 0

热门文章

最新文章

  • 1
    苹果app上架-ios上架苹果商店app store 之苹果支付In - App Purchase内购配置-优雅草卓伊凡
    48
  • 2
    苹果app上架app store 之苹果开发者账户在mac电脑上如何使用钥匙串访问-发行-APP发布证书ios_distribution.cer-优雅草卓伊凡
    44
  • 3
    uniapp云打包ios应用证书的获取方法,生成指南
    43
  • 4
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
    124
  • 5
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
    29
  • 6
    iOS各个证书生成细节
    42
  • 7
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    213
  • 8
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    66
  • 9
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    85
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    67