Comment puis-je étendre les accessoires d'un composant React Native à l'aide de Flow?

Question

J'utilise Flow (0.54.1) sur mon projet React Native (0.48.3). J'ai créé un composant appelé PrimaryButton qui enveloppe un composant natif TouchableOpacity. Je veux taper le composant en utilisant certains accessoires personnalisés et aussi l'ensemble des accessoires pour TouchableOpacity.

Comment puis-je accéder/étendre les accessoires appartenant à TouchableOpacity? (ou tout composant React Native natif/intégré)

Dans l'exemple suivant, j'essaie de savoir comment remplir 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> 
); 

Composant simplifié par souci de concision

Answer 1

Vous pouvez utiliser $PropertyType pour obtenir le type de quelque propriété d'un objet. Vous pouvez ensuite définir votre type Props comme ceci:

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