Question

此代码：

import React from 'react';
import styled from 'styled-components/native';

const Button = styled.Button`
  color: palevioletred;
`;

interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return <Button> Test btn</Button>;
  }
}

引发此错误：

没有重载匹配此调用。重载1，共2个，'（props：Pick ＆部分<...>，“ testID” | ... 6个更多... |“已禁用”>＆{...;}＆{...;}＆{...;}）：ReactElement <。 ..>'，给出了以下错误。输入'{children：string; }'从类型'Pick ＆Partial <...>，“ testID” | ... 6更多... | “ disabled”>'：onPress标题重载2，共2个，'（属性：StyledComponentPropsWithAs ）：ReactElement ，字符串| ... 1更多... | （new（props：any）=> Component <...>）>'，出现以下错误。输入'{children：string; }'从类型'Pick ＆Partial <...>，“ testID” | ...还有6个...

我已经安装了 @types/styled-components 为什么会这样？

Answer 1

每个按钮都必须具有标题和onPress属性，这些属性是强制性的。您的颜色样式也必须是Button的一种。

因此您的Button组件应类似于：

<Button 
  title="Test btn"
  onPress={testFunction}
  color="#DB7093"
/>

样式化组件按钮（React-Native）中的打字稿问题

1 个答案: