简单使用
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。
相关链接
- How to Create Native Modules in React Native (iOS) | FREE code tutorials
- React Native 与 iOS OC 之间的交互