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。

相关链接


相关文章
|
6月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
6月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
67 0
|
6月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
6月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
115 0
|
6月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
68 11
|
6月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
385 2
|
6月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
184 3
|
6月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。