如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件？

Posted 2023-03-13

【中文标题】如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件？

【英文标题】：How to type Stateless Functional Component using styled-component in React-Native with TypeScript?

【发布时间】：2019-09-16 22:45:35

【问题描述】：

自从一周以来，我们在我的团队项目中使用样式化组件宽度 React-Native 和 Typescript。

我正在努力理解如何正确使用 Typescript。

我的问题

我实际上很难理解我应该如何使用样式方法键入无状态功能组件。

实际代码

这是我关注doc的内容：

const SFCView: SFC<> = (props) => 
  return <View style=props.style />


const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

我的错误

Typescript 告诉我，我的类型 SFC<> 中不存在道具样式。事实上，我没有在任何地方定义它。

我尝试了什么

我试图告诉 typescript 我的 SFC 有这些道具

const SFCView: SFC<style: ViewStyle> = (props) => 
  return <View style=props.style />

但是当我在代码中的其他地方使用SFCView 时，打字稿告诉我必须指定视图的所有道具。

有人知道如何正确输入吗？

【问题讨论】：

您希望 props.style 覆盖 StyledSFCView 的任何样式还是仅覆盖您当前拥有的样式，即宽度、高度和背景颜色？

@BenSmith 就是我的风格。

【参考方案1】：

你可以写style(MyComponent)，但要让它生效，你需要将styled-components提供的prop className传递给最终的DOM元素。

在你的情况下，它应该是这样的：

const StyledView = styled(View)`
  width: 100;
  height: 100;
  background-color: green;
`;

const View = ( className, ... otherPropsYouMightHave ) => (
  // Whatever you have in this component
  <div className=className>
    // Whatever View needs to render
  </div>
)

编辑：正如你所提到的，react-native 需要 style 属性而不是 className

【讨论】：

实际上对于 React-Native 我们需要使用style 而不是className（RN 组件不存在）。

你说得对，react-native 需要style 而不是className 所以你自己的答案似乎是正确的，除了我认为SFCView 是多余的，你可以写@987654334 @ 直接让 View 处理可选的style prop styled-components.com/docs/basics#styling-any-components 看起来像

【参考方案2】：

经过一番研究，我找到了带有 className 的网络标准。

我目前更好的解决方案

import  SFC  from 'react';
import  StyleProp, ViewStyle  from 'react-native';

interface IProps 
 style?: StyleProp<ViewStyle>


const SFCView: SFC<IProps> = (props) => 
  return <View style=props.style />


const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

优点：

SFCView 中的 style 属性不再出现错误。 style prop 是可选的，所以当我使用 StyledSFCView 时没有错误。

缺点：

style 是可选的，开发者可以在使用StyledSFCView 时定义它。

现在这是我必须澄清的最后一点。

【讨论】：

如果您希望样式道具是强制性的，请删除问号