相关疑难解决方法(0)

如果您添加styled-components到 React Native 项目，则会有一个专门用于本机组件的子目录：

import styled from 'styled-components/native`;

export const Container = styled.View`
  ...
`;

如果您尝试在 React Native TypeScript 项目中执行此操作，您将遇到以下打字错误：

Could not find a declaration file for module 'styled-components/native'.

解决此问题的典型方法是@types/styled-components在开发依赖项中安装该模块，但这并不能解决问题。

这是我的样式化组件。

import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';

interface Props {
    children: ComponentChildren;
    emphasized: boolean;
}

const HeadingStyled = styled.h2`
    ${props => props.emphasized && css`
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
  `}
`;

const Heading = (props: Props) => (
    <HeadingStyled>
        {props.children}
    </HeadingStyled>
);

export default Heading;

我收到以下警告：

• Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.
• Cannot find name 'css'. Did you mean 'CSS'?

我该如何工作？

我正在尝试将打字稿集成到我们的项目中,到目前为止,我偶然发现了样式组件库的一个问题

考虑这个组件

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: Props) => p.width};
  height: ${(p: Props) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px" …