跳到主要内容

Turbo 原生模块:iOS

现在是时候编写一些 iOS 平台代码,确保应用关闭后 localStorage 仍然存在。

准备你的 Xcode 项目

我们需要使用 Xcode 来准备你的 iOS 项目。完成这 6 个步骤 后,你将拥有实现生成的 NativeLocalStorageSpec 接口的 RCTNativeLocalStorage

  1. 打开 CocoaPods 生成的 Xcode Workspace:
cd ios
open TurboModuleExample.xcworkspace
打开 Xcode Workspace
  1. 右键点击 app 并选择 New Group,将新组命名为 NativeLocalStorage
右键点击 app 并选择 New Group
  1. NativeLocalStorage 组中,创建 NewFile from Template
使用 Cocoa Touch Class 模板创建新文件
  1. 使用 Cocoa Touch Class
使用 Cocoa Touch Class 模板
  1. 使用 Objective-C 语言,将 Cocoa Touch Class 命名为 RCTNativeLocalStorage
创建一个 Objective-C 的 RCTNativeLocalStorage 类
  1. RCTNativeLocalStorage.m 重命名为 RCTNativeLocalStorage.mm,使其成为 Objective-C++ 文件。
转换为 Objective-C++ 文件

使用 NSUserDefaults 实现 localStorage

先更新 RCTNativeLocalStorage.h

NativeLocalStorage/RCTNativeLocalStorage.h
// RCTNativeLocalStorage.h
// TurboModuleExample

#import <Foundation/Foundation.h>
#import <NativeLocalStorageSpec/NativeLocalStorageSpec.h>

NS_ASSUME_NONNULL_BEGIN

@interface RCTNativeLocalStorage : NSObject
@interface RCTNativeLocalStorage : NSObject <NativeLocalStorageSpec>

@end

然后更新我们的实现,使用带有自定义 suite nameNSUserDefaults

NativeLocalStorage/RCTNativeLocalStorage.mm
// RCTNativeLocalStorage.m
// TurboModuleExample

#import "RCTNativeLocalStorage.h"

static NSString *const RCTNativeLocalStorageKey = @"local-storage";

@interface RCTNativeLocalStorage()
@property (strong, nonatomic) NSUserDefaults *localStorage;
@end

@implementation RCTNativeLocalStorage

- (id) init {
if (self = [super init]) {
_localStorage = [[NSUserDefaults alloc] initWithSuiteName:RCTNativeLocalStorageKey];
}
return self;
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
return std::make_shared<facebook::react::NativeLocalStorageSpecJSI>(params);
}

- (NSString * _Nullable)getItem:(NSString *)key {
return [self.localStorage stringForKey:key];
}

- (void)setItem:(NSString *)value
key:(NSString *)key {
[self.localStorage setObject:value forKey:key];
}

- (void)removeItem:(NSString *)key {
[self.localStorage removeObjectForKey:key];
}

- (void)clear {
NSDictionary *keys = [self.localStorage dictionaryRepresentation];
for (NSString *key in keys) {
[self removeItem:key];
}
}

+ (NSString *)moduleName
{
return @"NativeLocalStorage";
}

@end

需要注意的重要事项:

  • 你可以使用 Xcode 跳转到 Codegen 的 @protocol NativeLocalStorageSpec。你也可以使用 Xcode 为你生成存根。

在你的应用中注册原生模块

最后一步是更新 package.json,以告知 React Native JS 端原生模块的规范与这些规范在原生代码中的具体实现之间的关联。

按如下方式修改 package.json

package.json
"start": "react-native start",
"test": "jest"
},
"codegenConfig": {
"name": "NativeLocalStorageSpec",
"type": "modules",
"jsSrcsDir": "specs",
"android": {
"javaPackageName": "com.nativelocalstorage"
},
"ios": {
"modulesProvider": {
"NativeLocalStorage": "RCTNativeLocalStorage"
}
}
},

"dependencies": {

此时,你需要重新安装 pods,以确保 codegen 再次运行并生成新文件:

# 来自 ios 文件夹
bundle exec pod install
open TurboModuleExample.xcworkspace

如果你现在从 Xcode 构建应用,应该能够成功构建。

在模拟器上构建并运行你的代码

npm run ios