Solito项目中的屏幕参数管理指南

Solito项目中的屏幕参数管理指南

solito 🧍‍♂️ React Native + Next.js, unified. 项目地址: https://gitcode.com/gh_mirrors/so/solito

前言

在现代跨平台应用开发中，参数传递是一个常见但容易出错的环节。Solito作为一个优秀的跨平台解决方案，提供了一套简洁而强大的参数管理工具，帮助开发者在Web和Native平台上实现一致的参数处理体验。

核心概念

Solito通过createParam工厂函数创建参数管理工具，主要包含两个核心钩子：

1. useParam - 用于管理单个参数
2. useParams - 用于批量管理多个参数

基础用法

初始化参数管理工具

import { createParam } from 'solito'

// 定义参数类型
type Params = {
  artistSlug?: string
}

// 创建参数管理工具
const { useParam, useParams } = createParam<Params>()

使用useParams批量管理参数

export default function Page() {
  const { params, setParams } = useParams()

  const artistSlug = params.artistSlug // 可选字符串
  
  const updateSlug = () => {
    setParams({
      // 新参数会与现有参数合并
      artistSlug: 'drake',
    })
  }
}

高级用法：useParam详解

useParam是Solito提供的更精细的参数管理钩子，它在不同平台上有不同的实现：

• Web端：基于Next.js的路由查询参数
• Native端：基于React Navigation的路由参数

基本示例

import { createParam } from 'solito'
import { Text } from 'react-native'

const { useParam } = createParam()

export const UserName = () => {
  const [username, setUsername] = useParam('username')

  return <Text>{username}</Text>
}

类型安全

Solito提供了完善的TypeScript支持：

type Query = { username: string }

const { useParam } = createParam<Query>()

export const UserName = () => {
  const [username, setUsername] = useParam('username')

  return <Text>{username}</Text>
}

最佳实践：自定义Hook

建议将参数管理封装为自定义Hook，提高代码复用性和可维护性。

单参数Hook示例

export const useUsername = () => {
  const [username, setUsername] = useParam('username')
  return { username, setUsername }
}

多参数Hook示例

type UserScreenParams = { username: string; referredBy?: string }

export const useUserScreenParams = () => {
  const [username] = useParam('username')
  const [referredBy] = useParam('referredBy')
  return { username, referredBy }
}

参数解析与安全性

URL参数可能存在安全隐患，Solito提供了parse函数来确保参数安全：

const [template, setTemplate] = useParam('template', {
  initial: 'story',
  parse: (templateFromUrl) => {
    // 确保参数值合法
    if (templateFromUrl === 'story' || templateFromUrl === 'square') {
      return templateFromUrl
    }
    return 'story' // 默认值
  }
})

参数序列化

可以通过stringify自定义参数在URL中的表现形式：

const [bookingId, setBookingId] = useParam('bookingId', {
  stringify: (bookingId) => `artist-${bookingId}`,
  parse: (bookingIdFromUrl) => {
    if (Array.isArray(bookingIdFromUrl)) {
      return bookingIdFromUrl[0]?.replace('artist-', '')
    }
    return bookingIdFromUrl?.replace('artist-', '')
  },
  initial: '',
})

与传统方案的对比

与React Navigation对比

传统方式：

const useUsername = () => {
  const route = useRoute()
  return route.params?.username
}

Solito方式：

const { useParam } = createParam()
const [username] = useParam('username')

与Next.js对比

传统方式：

const useUsername = () => {
  const router = useRouter()
  return router?.query.username
}

Solito方式：

const { useParam } = createParam()
const [username] = useParam('username')

总结

Solito的参数管理方案提供了以下优势：

1. 跨平台一致性：统一Web和Native的参数管理方式
2. 类型安全：完善的TypeScript支持
3. 安全性：通过parse函数确保参数安全
4. 灵活性：支持自定义序列化和解析逻辑
5. 易用性：简洁的API设计，降低学习成本

通过合理使用Solito的参数管理工具，开发者可以显著提高跨平台应用的开发效率和代码质量。

solito 🧍‍♂️ React Native + Next.js, unified. 项目地址: https://gitcode.com/gh_mirrors/so/solito