时间戳

首页 > 解决方案 > 使用样式组件的类型定义错误

javascript - 使用样式组件的类型定义错误

问题描述

我styled-components在一个react native项目中使用。我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;

`;

标签： javascripttypescriptreact-nativestyled-components

解决方案

通过安装为 react native 添加样式化组件类型

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

有关配置的详细信息，您可以阅读他们的指南。

推荐阅读