Turbo 原生模块：iOS

现在是时候编写一些 iOS 平台代码，以确保 localStorage 在应用程序关闭后依然存在。

准备你的 Xcode 项目

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

1. 打开 CocoaPods 生成的 Xcode Workspace：

cd ios
open TurboModuleExample.xcworkspace

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

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

4. 使用 Cocoa Touch Class。

5. 将 Cocoa Touch Class 命名为 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

然后更新我们的实现以使用 NSUserDefaults 和自定义的 suite name。

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

npm run ios

Yarn

yarn run ios