跳到主要内容
版本：Next

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 组中，创建 New→File from Template。
使用 Cocoa Touch Class 模板创建新文件
  1. 使用 Cocoa Touch Class。
使用 Cocoa Touch Class 模板
  1. 将 Cocoa Touch Class 命名为 RCTNativeLocalStorage，语言选择 Objective-C。
创建 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

然后更新我们的实现以使用 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

- (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 再次运行并生成新文件：

# from the ios folder
bundle exec pod install
open TurboModuleExample.xcworkspace

如果你现在从 Xcode 构建你的应用程序，你应该能够成功构建。

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

npm run ios