react-native - 如何将 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" /> 时收到此流量警告:

Cannot create ButtonTouchable element because property color is missing in object type [1] but exists in props [2]. (References: [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};
`;