Turbo Native 模块：iOS

现在是时候编写一些 iOS 平台代码，确保 localStorage 在应用关闭后依然能够保留。

准备你的 Xcode 项目

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

1. 打开 CocoaPods 生成的 Xcode 工作区：

cd ios
open TurboModuleExample.xcworkspace

2. 右键点击 app，选择 New Group，将新建的组命名为 NativeLocalStorage。

3. 在 NativeLocalStorage 组内，创建 New→File from Template。

4. 选择 Cocoa Touch Class。

5. 将 Cocoa Touch 类命名为 RCTNativeLocalStorage，语言选择 Objective-C。

6. 将 RCTNativeLocalStorage.m 重命名为 RCTNativeLocalStorage.mm，使其成为 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 名称 的 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 为你生成存根代码。

在你的应用中注册 Native 模块

最后一步，是更新 package.json，告诉 React Native JS 端的 Native 模块规范与 native 代码中具体实现这些规范的桥接。

修改 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

npm run ios

Yarn

yarn run ios