原生模块中触发事件

在某些情况下，你可能希望原生模块监听平台层的一些事件，然后将这些事件触发到 JavaScript 层，以便你的应用程序能够响应这些原生事件。在其他情况下，你可能有一些长时间运行的操作，它们可以触发事件，以便在这些操作发生时更新 UI。

这两种场景都是从原生模块触发事件的良好用例。在本指南中，你将学习如何做到这一点。

添加新键到存储时触发事件

在此示例中，你将学习在向存储添加新键时如何触发事件。更改键的值不会触发事件，但添加新键会。

本指南从原生模块指南开始。在深入本指南之前，请务必熟悉该指南，并可能在指南中实现示例。

步骤 1：更新 NativeLocalStorage 的 Specs

第一步是更新 NativeLocalStorage Specs，让 React Native 知道该模块可以触发事件。

TypeScript
Flow

打开 NativeLocalStorage.ts 文件并按以下方式更新它

NativeLocalStorage.ts
+import type {TurboModule, CodegenTypes} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

+export type KeyValuePair = {
+  key: string,
+  value: string,
+}

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null;
  removeItem(key: string): void;
  clear(): void;

+ readonly onKeyAdded: CodegenTypes.EventEmitter<KeyValuePair>;
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeLocalStorage',
);

打开 NativeLocalStorage.js 文件并按以下方式更新它

NativeLocalStorage.js

// @flow
+import type {TurboModule, CodegenTypes} from 'react-native';
import {TurboModule, TurboModuleRegistry} from 'react-native';

+export type KeyValuePair = {
+  key: string,
+  value: string,
+}

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): ?string;
  removeItem(key: string): void;
  clear(): void;
+ onKeyAdded: CodegenTypes.EventEmitter<KeyValuePair>
}
export default (TurboModuleRegistry.get<Spec>(
  'NativeLocalStorage'
): ?Spec);

通过 import type 语句，你正在从 react-native 导入 CodegenTypes，其中包含 EventEmitter 类型。这允许你使用 CodegenTypes.EventEmitter<KeyValuePair> 定义 onKeyAdded 属性，指定事件将触发类型为 KeyValuePair 的载荷。

当事件触发时，你期望它会接收一个类型为 KeyValuePair 的参数。

步骤 2：生成 Codegen

既然你已经更新了原生模块的 Specs，现在必须重新运行 Codegen 以在原生代码中生成工件。

这是原生模块指南中介绍的相同过程。

Android
iOS

Codegen 通过 generateCodegenArtifactsFromSchema Gradle 任务执行

bash
cd android
./gradlew generateCodegenArtifactsFromSchema

BUILD SUCCESSFUL in 837ms
14 actionable tasks: 3 executed, 11 up-to-date

这会在你构建 Android 应用程序时自动运行。

Codegen 作为脚本阶段的一部分运行，该脚本阶段会自动添加到 CocoaPods 生成的项目中。

bash
cd ios
bundle install
bundle exec pod install

输出将如下所示：

shell
...
Framework build type is static library
[Codegen] Adding script_phases to ReactCodegen.
[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
[Codegen] Searching for Codegen-enabled libraries in the app.
[Codegen] Found TurboModuleExample
[Codegen] Searching for Codegen-enabled libraries in the project dependencies.
[Codegen] Found react-native
...

步骤 3：更新 App 代码

现在，是时候更新 App 的代码来处理新事件了。

打开 App.tsx 文件并按以下方式修改它

App.tsx
import React from 'react';
import {
+ Alert,
+ EventSubscription,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  Button,
} from 'react-native';

import NativeLocalStorage from './specs/NativeLocalStorage';

const EMPTY = '<empty>';

function App(): React.JSX.Element {
  const [value, setValue] = React.useState<string | null>(null);
+ const [key, setKey] = React.useState<string | null>(null);
+ const listenerSubscription = React.useRef<null | EventSubscription>(null);

+ React.useEffect(() => {
+   listenerSubscription.current = NativeLocalStorage?.onKeyAdded((pair) => Alert.alert(`New key added: ${pair.key} with value: ${pair.value}`));

+   return  () => {
+     listenerSubscription.current?.remove();
+     listenerSubscription.current = null;
+   }
+ }, [])

  const [editingValue, setEditingValue] = React.useState<
    string | null
  >(null);

- React.useEffect(() => {
-   const storedValue = NativeLocalStorage?.getItem('myKey');
-   setValue(storedValue ?? '');
- }, []);

  function saveValue() {
+   if (key == null) {
+     Alert.alert('Please enter a key');
+     return;
+   }
    NativeLocalStorage?.setItem(editingValue ?? EMPTY, key);
    setValue(editingValue);
  }

  function clearAll() {
    NativeLocalStorage?.clear();
    setValue('');
  }

  function deleteValue() {
+   if (key == null) {
+     Alert.alert('Please enter a key');
+     return;
+   }
    NativeLocalStorage?.removeItem(key);
    setValue('');
  }

+ function retrieveValue() {
+   if (key == null) {
+     Alert.alert('Please enter a key');
+     return;
+   }
+   const val = NativeLocalStorage?.getItem(key);
+   setValue(val);
+ }

  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={styles.text}>
        Current stored value is: {value ?? 'No Value'}
      </Text>
+     <Text>Key:</Text>
+      <TextInput
+       placeholder="Enter the key you want to store"
+       style={styles.textInput}
+       onChangeText={setKey}
+     />
+     <Text>Value:</Text>
      <TextInput
        placeholder="Enter the text you want to store"
        style={styles.textInput}
        onChangeText={setEditingValue}
      />
      <Button title="Save" onPress={saveValue} />
+     <Button title="Retrieve" onPress={retrieveValue} />
      <Button title="Delete" onPress={deleteValue} />
      <Button title="Clear" onPress={clearAll} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  text: {
    margin: 10,
    fontSize: 20,
  },
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },
});

export default App;

有几个相关的更改需要注意

你需要从 react-native 导入 EventSubscription 类型来处理 EventSubscription
你需要使用 useRef 来跟踪 EventSubscription 引用
你使用 useEffect hook 注册监听器。onKeyAdded 函数接受一个回调，该回调有一个类型为 KeyValuePair 的对象作为函数参数。
添加到 onKeyAdded 的回调在每次从 Native 到 JS 触发事件时都会执行。
在 useEffect 的清理函数中，你 remove 事件订阅，并将 ref 设置为 null。

其余的更改是常规的 React 更改，以改进 App 以支持此新功能。

步骤 4：编写你的原生代码

一切准备就绪，让我们开始编写原生平台代码。

Android
iOS

假设你遵循了原生模块指南中描述的 Android 指南，接下来要做的是将触发事件的代码插入到你的 App 中。

为此，你需要

打开 NativeLocalStorage.kt 文件
按以下方式修改它

NativeLocalStorage
package com.nativelocalstorage

import android.content.Context
import android.content.SharedPreferences
import com.nativelocalstorage.NativeLocalStorageSpec
+import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.WritableMap

class NativeLocalStorageModule(reactContext: ReactApplicationContext) : NativeLocalStorageSpec(reactContext) {

  override fun getName() = NAME

  override fun setItem(value: String, key: String) {
+   var shouldEmit = false
+   if (getItem(key) != null) {
+       shouldEmit = true
+   }
    val sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE)
    val editor = sharedPref.edit()
    editor.putString(key, value)
    editor.apply()

+   if (shouldEmit == true) {
+       val eventData = Arguments.createMap().apply {
+           putString("key", key)
+           putString("value", value)
+       }
+       emitOnKeyAdded(eventData)
+   }
  }

  override fun getItem(key: String): String? {
    val sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE)
    val username = sharedPref.getString(key, null)
    return username.toString()
  }

首先，你需要导入几个类型，以便创建需要从 Native 发送到 JS 的 eventData。这些导入是

import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap

其次，你需要实现实际将事件触发到 JS 的逻辑。对于复杂类型，例如 Specs 中定义的 KeyValuePair，Codegen 将生成一个需要 ReadableMap 作为参数的函数。你可以使用 Arguments.createMap() 工厂方法创建 ReadableMap，并使用 apply 函数来填充 map。你负责确保 map 中使用的键与 JS 中 Specs 类型中定义的属性相同。

假设你遵循了原生模块指南中描述的 iOS 指南，接下来要做的是将触发事件的代码插入到你的 App 中。

为此，你需要

打开 RCTNativeLocalStorage.h 文件。
将基类从 NSObject 更改为 NativeLocalStorageSpecBase

RCTNativeLocalStorage.h
#import <Foundation/Foundation.h>
#import <NativeLocalStorageSpec/NativeLocalStorageSpec.h>

NS_ASSUME_NONNULL_BEGIN

-@interface RCTNativeLocalStorage : NSObject <NativeLocalStorageSpec>
+@interface RCTNativeLocalStorage : NativeLocalStorageSpecBase <NativeLocalStorageSpec>

@end

NS_ASSUME_NONNULL_END

打开 RCTNativeLocalStorage.mm 文件。
修改它以在需要时触发事件，例如

RCTNativeLocalStorage.mm
 - (void)setItem:(NSString *)value key:(NSString *)key {
+  BOOL shouldEmitEvent = NO;
+  if (![self getItem:key]) {
+    shouldEmitEvent = YES;
+  }
   [self.localStorage setObject:value forKey:key];

+  if (shouldEmitEvent) {
+    [self emitOnKeyAdded:@{@"key": key, @"value": value}];
+  }
}

NativeLocalStorageSpecBase 是一个基类，它提供了 emitOnKeyAdded 方法及其基本实现和样板代码。感谢这个类，你不必处理将事件发送到 JS 所需的所有 Objective-C 和 JSI 之间的转换。

对于复杂类型，例如 Specs 中定义的 KeyValuePair，Codegen 将生成一个通用的字典，你可以在原生端填充它。你负责确保字典中使用的键与 JS 中 Specs 类型中定义的属性相同。

步骤 5：运行你的 App

如果你现在尝试运行你的 App，你应该会看到此行为。

Android	iOS

添加新键到存储时触发事件​

步骤 1：更新 NativeLocalStorage 的 Specs​

步骤 2：生成 Codegen​

步骤 3：更新 App 代码​

步骤 4：编写你的原生代码​

步骤 5：运行你的 App​