创建 Native 模块:
1. 创建 Native 模块文件:
在你的 React Native 项目中,创建一个新的 Native 模块文件,通常以 .m 作为文件扩展名。该文件将包含原生代码。
// MyNativeModule.m
#import <React/RCTBridgeModule.h>
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
@implementation MyNativeModule
RCT_EXPORT_MODULE(); // 导出模块
RCT_EXPORT_METHOD(doSomething) {
// 执行原生代码
}
@end
2. 链接 Native 模块:
打开项目的 Xcode 工程,确保 Native 模块文件被添加到 Xcode 项目中。你可能需要手动链接文件。
3. 导出模块和方法:
使用 RCT_EXPORT_MODULE 宏导出模块,并使用 RCT_EXPORT_METHOD 宏导出模块中的方法。这样,这些方法就可以从 JavaScript 代码中调用。
在 JavaScript 中使用 Native 模块:
1. 导入 Native 模块:
在你的 JavaScript 代码中,使用 NativeModules 来导入 Native 模块。
import { NativeModules } from 'react-native';
const MyNativeModule = NativeModules.MyNativeModule;
2. 调用原生方法:
调用在 Native 模块中定义的方法。
MyNativeModule.doSomething();
传递数据:
在原生方法和 JavaScript 之间传递数据,你可以使用回调函数或者 Promises。你还可以使用 RCT_EXPORT_METHOD 宏的参数列表来声明方法接受的参数。
// MyNativeModule.m
RCT_EXPORT_METHOD(doSomethingWithCallback:(RCTResponseSenderBlock)callback) {
// 执行原生代码
NSArray *resultData = @[/* 数据 */];
callback(@[[NSNull null], resultData]);
}
// JavaScript
MyNativeModule.doSomethingWithCallback((error, result) => {
if (error) {
console.error(error);
} else {
console.log(result);
}
});
这是一个基本的 Native 模块创建和使用的示例。请注意,要确保模块的命名空间在 JavaScript 中与导出的模块名称一致。此外,还有其他高级用法和配置选项,具体取决于你的需求和项目结构。
转载请注明出处:http://www.zyzy.cn/article/detail/9451/React Native