Question

我正在尝试将color道具添加到styled-components包装的TouchableOpacity中，并获得流程以正确键入它。

type TouchableOpacityProps = $PropertyType<Element<TouchableOpacity>, "props">;
type ButtonTouchableProps = { color: string } & TouchableOpacityProps;

const ButtonTouchable: ComponentType<ButtonTouchableProps> = styled.TouchableOpacity`
  background-color: ${props => props.color};
`;

但是，在使用<ButtonTouchable color="#CCCCCC" />时，我得到了以下流量警告：

无法创建ButtonTouchable元素，因为属性color为对象类型[1]中缺少，但在道具[2]中存在。（参考：[1] [2]）

Answer 1

// @flow
import { type ElementConfig, type ComponentType } from 'react';
import { TouchableOpacity } from 'react-native';

type ButtonTouchableProps = {|
  ...$Exact<ElementConfig<typeof TouchableOpacity>>,
  color: string,
|};

const ButtonTouchable: ComponentType<ButtonTouchableProps> = styled.TouchableOpacity`
  background-color: ${props => props.color};
`;

如何将TouchableOpacity道具类型与其他字段结合使用

1 个答案: