styled-component不继承通过react-native中的attrs方法传递的props

ehxuflar 于 2023-11-21 发布在 React

关注(0)|答案(2)|浏览(116)

最近，我们使用最新版本的样式化组件6.0.8更新了针对RN072.5的项目

"dependencies": {
  ...,
  "react": "18.2.0",
  "react-is": "18.2.0",
  "react-native": "0.72.5",
  "styled-components": "6.0.7",
  "stylis": "^4.0.0"
},
"devDependencies": {
  ...,
  "@types/react": "^18.0.24",
  "@typescript-eslint/eslint-plugin": "^5.54.1",
  "@typescript-eslint/parser": "^5.54.1",
  "@typescript-eslint/typescript-estree": "^5.54.1",
  "babel-plugin-styled-components": "^2.1.4",
},
resolutions: {
  "styled-components": "^6"
}

字符串
给定以下组件，typescript将 source 和 resizeMode 识别为有效的props

const BlurImage = styled.Image.attrs({
  source: blur,
  resizeMode: 'stretch'
})`
  width: 100%;
  height: 100%;
`;

型
但是当我尝试使用组件时，它给我以下错误

的数据

Property  source  is missing in type  {}  but required in type
FastOmit<FastOmit<Substitute<ImageProps, ImageProps & RefAttributes<Image>>, never>, never>

型

react-native

来源：https://stackoverflow.com/questions/77200969/styled-component-does-not-inherit-props-passed-through-attrs-method-in-react-nat

2条答案

按热度按时间

fjnneemd1#

等待一个“更好的解决方案”，我会张贴你我的快速和肮脏的变通办法，如果你需要“尽快使它工作。
我只是输入“可选”我的默认属性。我需要降级styled-components到6.0.7版本，以使它的工作。

const BlurImage = styled(Image).attrs<{ source?: ImageSourcePropType | undefined }>({
  source: blur,
  resizeMode: 'stretch'
})`
  width: 100%;
  height: 100%;
`;

字符串
通过这种方式，<BlurImage />可以在没有 （错误输入） 强制性source的情况下使用。这不是解决方案，因为具有许多属性的组件变得非常长，无法写入和输入。而且，如果您忘记指定它，则会在执行期间抛出错误，但不会在TS中抛出。
你也可以输入.attrs<Partial<ImageProps>>，但这更危险，因为隐藏了所有强制 prop 。