在 Typescript 的样式化组件中使用类型

Question

所以，我正在使用 React Native，之前从未使用过 Styled Components。
当我创建一个没有 SC 的新组件时，比如自定义按钮，我执行以下操作：

import React, { ReactNode } from 'react'
import { TouchableOpacity, TouchableOpacityProps} from 'react-native'

import styles from './styles'

type CustomButtonProps = TouchableOpacityProps & {
  children: ReactNode 
}

const CustomButton = ({ children, ...props }: CustomButtonProps) => {
  return (
    <TouchableOpacity style={styles.container} {...props}>
      {children}
    </TouchableOpacity>
  )
}

export { CustomButton }

这样，当我在其他地方使用我的组件时，我可以传递所有未在我的自定义道具中列出的附加 TouchableOpacity 道具。

我想知道当我使用 Styled Components 继续使用未列出的道具时，我用什么类型来替换 TouchableOpacityProps，因为，如果我使用 TouchableOpacityProps，它会我说类型不匹配的错误：

import React, { ReactNode } from 'react'

import { StyledTouchableOpacity } from './styles'

type CustomButtonProps = ??? & {
  children: ReactNode 
}

const CustomButton = ({ children, ...props }: CustomButtonProps) => {
  return (
    <StyledTouchableOpacity {...props}>
      {children}
    </StyledTouchableOpacity>
  )
}

export { CustomButton }

谢谢:)

Answer 1

你的道具是正确的。我认为您正在使用 styled.TouchableOpacity，其中 TouchableOpacity 由 styled-component 提供，它会提示您错误，因为它与 react-native 的 TouchableOpacity[=16= 不兼容]

所以给 styled 提供 react-native TouchableOpacity 可以解决类型问题:

import { TouchableOpacity, TouchableOpacityProps} from 'react-native'

const StyledTouchableOpacity = styled(TouchableOpacity)`
  ...
`

完整代码：

import React, { ReactNode } from 'react'
import { TouchableOpacity, TouchableOpacityProps} from 'react-native'
import styled from 'styled-components/native';

const StyledTouchableOpacity = styled(TouchableOpacity)`
  padding-vertical: 16px;
  padding-horizontal: 24px;
`;

type CustomButtonProps = TouchableOpacityProps & {
    children: ReactNode 
}

const CustomButton = ({ children, ...props }: CustomButtonProps) => {
  return (
    <StyledTouchableOpacity {...props}>
      {children}
    </StyledTouchableOpacity>
  )
}

export { CustomButton }

在 Typescript 的样式化组件中使用类型

Using types in Styled Component in Typescript

typescript

react-native

styled-components

react-typescript