Granite项目中的useParams：React Native路由参数管理指南

什么是useParams

在Granite项目中，useParams是一个专门为React Native设计的Hook，用于从指定路由中获取参数。它简化了路由参数访问的过程，同时提供了参数验证和类型转换的能力，帮助开发者编写更安全、更健壮的代码。

核心特性

1. 参数获取：轻松访问当前路由的参数
2. 类型安全：通过TypeScript支持确保参数类型正确
3. 参数验证：内置参数结构验证机制
4. 灵活使用：支持多种使用方式适应不同场景

使用方法详解

基本签名

function useParams<TScreen extends keyof RegisterScreen>(options: {
  from: TScreen;
  strict?: true;
}): RegisterScreen[TScreen];

参数说明

• options（必需）：包含路由信息的对象
  • from：要获取参数的路由路径。如果不指定，则从当前路由获取参数。在严格模式下必须指定
  • strict：严格模式设置。为true时，如果指定路由与当前路由不匹配会抛出错误；为false时，跳过validateParams验证，直接返回当前屏幕的参数

实际应用示例

获取路由参数

Granite项目提供了三种获取路由参数的方式：

import React from 'react';
import { Text } from 'react-native';
import { createRoute, useParams } from '@granite-js/react-native';

// 创建路由
export const Route = createRoute('/examples/use-params', {
  validateParams: (params) => params as { id: string },
  component: UseParamsExample,
});

function UseParamsExample() {
  // 方式1：使用路由对象的useParams方法
  const params = Route.useParams();

  // 方式2：直接使用useParams Hook
  const params2 = useParams({ from: '/examples/use-params' });

  // 方式3：使用非严格模式
  // 严格模式为false时，从当前路由获取参数并跳过验证
  const params3 = useParams({ strict: false }) as { id: string };

  return (
    <>
      <Text>{params.id}</Text>
      <Text>{params2.id}</Text>
      <Text>{params3.id}</Text>
    </>
  );
}

最佳实践建议

1. 优先使用严格模式：严格模式能确保参数类型安全，减少运行时错误
2. 合理使用参数验证：通过validateParams验证参数结构，提高代码健壮性
3. 类型断言谨慎使用：非严格模式下需要手动类型断言，应确保类型正确性
4. 路由命名规范：保持路由路径命名一致，避免拼写错误

常见问题解答

Q：什么时候应该使用严格模式？

A：在开发阶段和生产环境中都建议使用严格模式，它能帮助捕获潜在的类型错误。只有在确实需要动态处理路由参数时才考虑关闭严格模式。

Q：validateParams和TypeScript类型检查有什么区别？

A：validateParams在运行时进行验证，而TypeScript只在编译时检查。两者结合使用可以提供更全面的类型安全保障。

Q：如何处理可选参数？

A：可以在validateParams中定义可选参数的类型，或者使用TypeScript的可选类型标记。

通过Granite项目的useParams Hook，开发者可以更加优雅和安全地处理React Native应用中的路由参数问题，提高代码质量和开发效率。