React Native 如何使用gluestack-ui类型

ffscu2ro  于 2023-10-23  发布在  React
关注(0)|答案(2)|浏览(294)

我正在使用新的组件库(gluestack-ui)。
我正在使用typescript,我想在我的组件中使用“Box”组件 prop 类型接口。
找不到,接口是否导出?

import { Box } from '@gluestack-ui/themed'

export interface PaperProps extends PropsWithChildren  {}

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

例如,在material-ui中,您可以:

import { Box, type BoxProps } from '@mui/material'

例如,I可以:

export interface PaperProps extends PropsWithChildren & BoxProps  {}

我怎么能用gluestack-ui做同样的事情呢?

gzszwxb4

gzszwxb41#

目前,它仍处于测试阶段,所以在不久的将来可能会有变化。
尽管我不确定这是否是预期的用法,但您现在可以按以下方式使用它。由于Box本质上是具有额外样式的View,而Button是具有额外样式的Pressable,因此您可以为这些组件使用原生react-nativeProp Types
还有一些类似的组件,但不幸的是,我不得不深入研究代码库,因为我还没有找到任何关于这个的文档。

import { ViewProps, PressableProps } from 'react-native'
import { Box, Button } from '@gluestack-ui/themed'

export interface MyFancyBoxProps extends PropsWithChildren<ViewProps>  {}

export default function MyFancyBox({ children }: MyFancyBoxProps) {
  return <Box>{children}</Box>
}

interface MyButtonProps extends PropsWithChildren<PressableProps> {}

function MyButton(props: MyButtonProps) {
  return <Button {...props} />
}

如果碰巧根本没有导出接口,那么您总是可以给予ComponentProps一个机会。

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

type ButtonProps = ComponentProps<typeof Button>;
type BoxProps = ComponentProps<typeof Box>;

Matt Pocock has written a great article about it.这是一个伟大的工具,有在您的工具箱一般!

ejk8hzay

ejk8hzay2#

你可以使用react中的ComponentProps来实现这一点。

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

export interface PaperProps extends ComponentProps<typeof Box>  {}

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

font:https://stackoverflow.com/a/55220191/11705481

相关问题