RN Fetch工具类

export const baseUrl = “”;
// 拼接get参数
export const getParamsUrl = (url, params) => {
let paramsArray = [];
Object.keys(params).forEach(key => paramsArray.push(key + “=” + params[key]));
if (url.search(/?/) === -1) {
url += “?” + paramsArray.join("&");
} else {
url += “&” + paramsArray.join("&");
}
return url;
};

export const getData = async (url, obj) => {
url = obj ? getParamsUrl(url, obj) : url;
let res = await fetch(baseUrl + url, { method: “GET” });
let json = res.json();
return json;
};

export const postData = async (url, obj) => {
let res = await fetch(baseUrl + url, {
method: “POST”,
headers: {
Accept: “application/json”,
“Content-Type”: “application/json”
},
body: JSON.stringify(obj)
});
let json = await res.json();
return json;
};

<think>好的,用户现在问的是React Native中的TurboModuleRegistry的用法。之前他们遇到了一个关于TurboModule找不到的错误,现在可能是想更深入了解如何正确使用TurboModuleRegistry,避免之前的错误。 首先,我需要回顾一下TurboModuleRegistry的作用。它是React Native新架构的一部分,用于高性能的原生模块调用,替代了旧的NativeModules系统。用户可能需要知道如何正确注册和使用TurboModule,尤其是在新架构下。 接下来,我应该考虑用户的使用场景。他们可能正在开发一个需要高性能原生模块的React Native应用,或者是在迁移旧项目到新架构时遇到了问题。用户可能是中级开发者,对React Native有一定了解,但可能不太熟悉新架构的具体实现细节。 用户的需求可能包括:如何定义TurboModule接口,如何在原生端实现,如何注册模块,以及在JavaScript端如何调用。此外,可能还需要了解新旧架构的区别和迁移注意事项。 我需要确保回答结构清晰,分步骤说明用法,并提供代码示例。需要注意TurboModuleRegistry在新架构中的配置,比如启用Fabric和TurboModule,以及如何生成必要的代码。同时,要提醒用户注意版本兼容性,因为TurboModules主要在0.68及以上版本支持。 用户可能还会混淆TurboModule和旧的NativeModule,需要明确两者的区别,并指出TurboModule的优势,如类型安全和同步调用。此外,常见问题如模块未注册、名称不一致、代码生成失败等也需要提及,帮助用户避免常见错误。 最后,要确保回答符合之前设定的格式要求,使用中文,行内公式正确,结构清晰。需要检查是否有遗漏的步骤,比如安装依赖、配置新架构等,这些都可能影响TurboModule的使用。</think>以下是 React Native 中 `TurboModuleRegistry` 的核心用法解析,聚焦新架构(New Architecture)下的高性能原生模块开发: --- ### 一、TurboModule 核心概念 1. **替代旧架构的 NativeModules** TurboModule 是 React Native 新架构(Fabric + TurboModules)的核心组件,**性能更高**且支持**类型安全**的 JS 与原生代码通信。 2. **关键优势** - **懒加载**:模块仅在 JS 端调用时初始化 - **同步调用**:支持部分同步方法(需手动标记) - **代码生成**:通过 TypeScript/Flow 接口自动生成胶水代码 --- ### 二、基础使用步骤 #### 1. **定义 TypeScript/Flow 接口** ```typescript // NativeSampleModule.ts export interface Spec extends TurboModule { // 必须声明为常量 readonly getConstants: () => {}; // 方法需明确参数类型和返回值类型 showAlert(message: string, duration: number): void; add(a: number, b: number): number; // 异步方法 fetchData(): Promise<string>; } ``` #### 2. **原生端实现模块** - **Android (Kotlin)** ```kotlin // SampleModule.kt class SampleModule(reactContext: ReactApplicationContext) : SampleModuleSpec(reactContext) { // 继承自动生成的 Spec 类 override fun getName() = "SampleModule" override fun showAlert(message: String, duration: Double) { // 实现原生逻辑 } override fun add(a: Double, b: Double) = a + b override fun fetchData() = Promise { resolve, reject -> // 异步操作 } } ``` - **iOS (Swift)** ```swift // SampleModule.swift @objc(SampleModule) class SampleModule: NSObject, SampleModuleSpec { // 遵循自动生成的协议 @objc func showAlert(_ message: String, duration: NSNumber) { // 实现原生逻辑 } @objc func add(_ a: NSNumber, b: NSNumber) -> NSNumber { return NSNumber(value: a.doubleValue + b.doubleValue) } @objc func fetchData() -> AnyPromise { return AnyPromise(...) } } ``` #### 3. **JS 端调用** ```typescript import { TurboModuleRegistry } from 'react-native'; // 获取模块(类型安全) const SampleModule = TurboModuleRegistry.getEnforcing<Spec>('SampleModule'); // 使用模块 SampleModule.showAlert('Hello', 2000); const result = SampleModule.add(3, 5); ``` --- ### 三、新架构关键配置 #### 1. **启用 TurboModules** - **android/gradle.properties** ``` newArchEnabled=true ``` - **iOS Podfile** ```ruby use_react_native!(path: config[:reactNativePath], :fabric_enabled => true) ``` #### 2. **代码生成工具** 在项目根目录运行: ```bash yarn codegen ``` - 自动生成 `codegen` 目录下的接口文件 - 需确保 `package.json` 中包含 `react-native-codegen` 依赖 --- ### 四、常见问题 #### 1. **模块未找到** - 检查 `TurboModuleRegistry.getEnforcing` 的模块名是否与原生端 `getName()` 一致 - 确认已运行 `pod install` (iOS) 或同步 Gradle (Android) #### 2. **类型不匹配** - JS 接口与原生实现必须**严格类型对齐** - 使用 `readonly getConstants` 代替旧版 `constantsToExport()` #### 3. **代码生成失败** - 检查接口文件是否在 `src` 目录下且后缀为 `.ts`/`.js` - 确保接口继承 `TurboModule` 并导出为 `Spec` --- ### 五、迁移旧模块建议 1. **渐进式迁移**: ```typescript // 兼容新旧架构 const module = TurboModuleRegistry.getEnforcing('MyModule') ?? NativeModules.MyModule; ``` 2. **类型安全优先**:将旧 `NativeModules` 定义转换为 TurboModule 接口 通过 TurboModuleRegistry 的使用,开发者可以充分利用 React Native 新架构的性能优势,同时获得更好的类型安全保障。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值