使用 styled-components 的类型定义错误

Question

我在 react native 项目中使用 styled-components。我也在使用 typescript，我安装了软件包并安装了类型定义，但显示此错误：

由于未返回属性，这导致我出错。有人知道如何解决吗？

下面是我的 package.json 和我的组件。

"dependencies": {
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.2",
    "expo": "~41.0.1",
    "expo-splash-screen": "~0.10.2",
    "expo-updates": "~0.5.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "~2.1.0",
    "react-native-screens": "~3.0.0",
    "react-native-unimodules": "~0.13.3",
    "react-native-web": "~0.13.12",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/styled-components": "^5.1.12",
    "babel-preset-expo": "~8.3.0",
    "jest-expo": "~41.0.0",
    "typescript": "~4.0.0"
  },

import styled from 'styled-components/native';
import { RectButton } from 'react-native-gesture-handler';

export const Container = styled.View`
  padding: 0 30px;
`;

export const SearchContent = styled.View`
  width: 100%;
  flex-direction: row;
  align-items: center;
`;

export const Input = styled.TextInput`
  width: 100%;
  flex: 1;
  height: 36px;
  border: 1px solid #000;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  padding: 12px;
`;

export const Button = styled(RectButton)`
  background-color: #ff9000;

  align-items: center;
  justify-content: center;
  width: 50px;
  height: 36px;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

`;

Answer 1

通过安装

为react native添加样式组件类型

npm install @types/styled-components-react-native
// or 
yarn add @types/styled-components-react-native

详细配置请阅读their guideline。

使用 styled-components 的类型定义错误

Error with type definitions using styled-components

javascript

typescript

react-native

styled-components