跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.76

Turbo 原生模块：iOS

现在我们来编写一些 iOS 平台代码，以确保 localStorage 在应用关闭后仍然可以持久保存数据。

准备你的 Xcode 项目​

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

  1. 打开 CocoPods 生成的 Xcode workspace 文件：
bash
cd ios
open TurboModuleExample.xcworkspace
Open Xcode Workspace
  1. 右键点击应用，选择 New Group，将新组命名为 NativeLocalStorage。
Right click on app and select New Group
  1. 在 NativeLocalStorage 组中，创建 New→File from Template。
Create a new file using the Cocoa Touch Class template
  1. 使用 Cocoa Touch Class 模板。
Use the Cocoa Touch Class template
  1. 将类命名为 RCTNativeLocalStorage，并选择 Objective-C 语言。
Create an Objective-C RCTNativeLocalStorage class
  1. 将 RCTNativeLocalStorage.m 重命名为 RCTNativeLocalStorage.mm，使其成为 Objective-C++ 文件。
Convert to and Objective-C++ file

使用 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 name 的 NSUserDefaults。

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

RCT_EXPORT_MODULE(NativeLocalStorage)

- (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];
  }
}

@end

重要注意事项：

  • RCT_EXPORT_MODULE 导出并注册模块，使用我们在 JavaScript 环境中访问它的标识符：NativeLocalStorage。更多详情请参阅 docs。
  • 你可以使用 Xcode 跳转到 Codegen @protocol NativeLocalStorageSpec。你也可以使用 Xcode 为你生成 stub。

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

bash
npm run ios