如何在TypeScript中使用gluestack-ui的Box组件Props类型？

方法1：直接导入官方导出的BoxProps类型 #

gluestack-ui的组件类型通常随组件一同导出，你可以直接导入BoxProps来扩展自定义组件的类型：

import { Box, type BoxProps } from '@gluestack-ui/themed'
import type { PropsWithChildren } from 'react'

export interface PaperProps extends PropsWithChildren, BoxProps {}

export default function Paper({ children, ...rest }: PaperProps) { 
  return <Box {...rest}>{children}</Box>
}

如果在@gluestack-ui/themed中找不到BoxProps，可以尝试从核心库导入：

import type { BoxProps } from '@gluestack-ui/core'

方法2：用TypeScript内置工具推导类型 #

如果官方未导出对应类型，可通过ComponentProps工具从组件本身推导Props类型：

import { Box } from '@gluestack-ui/themed'
import type { PropsWithChildren, ComponentProps } from 'react'

// 从Box组件推导其Props类型
type BoxProps = ComponentProps<typeof Box>

export interface PaperProps extends PropsWithChildren, BoxProps {}

export default function Paper({ children, ...rest }: PaperProps) { 
  return <Box {...rest}>{children}</Box>
}

内容的提问来源于stack exchange，提问作者Islam Y-