如何将 TouchableOpacity Props 类型与附加字段相结合

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};
`;