如何使用 Flow 扩展 React Native 组件的道具？答案

【问题标题】：How can I extend a React Native component's props using Flow?如何使用 Flow 扩展 React Native 组件的道具？
【发布时间】：2019-01-17 20:32:20
【问题描述】：

我在我的 React Native (0.48.3) 项目中使用 Flow (0.54.1)。我创建了一个名为 PrimaryButton 的组件，它包装了一个原生的 TouchableOpacity 组件。我想使用一些自定义道具以及TouchableOpacity 的整套道具来键入组件。

如何访问/扩展属于TouchableOpacity 的道具？（或任何本机/内置 React Native 组件）

在下面的示例中，我试图弄清楚如何填充 PROPS_FROM_TOUCHABLE_OPACITY。

type Props = PROPS_FROM_TOUCHABLE_OPACITY & {
    title: string,
};

const PrimaryButton = ({ title, ...rest }: Props) => (
    <TouchableOpacity {...rest}>
        <View>
            <Text>{title}</Text>
        </View>
    </TouchableOpacity>
);

为简洁起见简化了组件

【问题讨论】：

标签： javascript reactjs react-native types flowtype

【解决方案1】：

您可以使用$PropertyType 来获取对象的某些属性的类型。然后，您可以像这样定义您的 Props 类型：

type Props = $PropertyType<TouchableOpacity, 'props'> & {
    title: string,
};

【讨论】：