跳到主要内容

Turbo Native Modules：iOS

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

准备 Xcode 项目​

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

  1. 打开 CocoaPods 生成的 Xcode 工作区：
cd ios
open TurboModuleExample.xcworkspace
打开 Xcode 工作区
  1. 右键点击应用并选择 新建组，将新组命名为 NativeLocalStorage
右键点击应用并选择新建组
  1. 在 NativeLocalStorage 组中，创建 新建→从模板创建文件
使用 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