Élément qui écoute l'événement de presse à l'intérieur de l'élément tactile

Question

J'ai un élément qui écoute les événements de presse. Comment puis-je envelopper un élément tangible et faire en sorte que mon élément personnalisé continue d'écouter les événements?

J'ai structure comme celle-

<TouchableOpacity 
    onPress={(e) => { console.log(e.nativeEvent); }} 
    style={{ flex: 1 }} 
> 
    <EpubDocumentReader 
     toggleEditHighlightModal={this.toggleEditHighlightModal} 
     onPress={(cfi, contents) => { console.log(cfi); }} 
     styleWidthBook={styleWidthBook} 
    /> 
</TouchableOpacity> 

maintenant TouchableOpacity prises appuyez sur les événements, mais il n'invoque pas l'événement sur les éléments de l'enfant.

Answer 1

Qu'essayez-vous d'atteindre?

Votre composant personnalisé onPress ne sera jamais appelé. Seul le onPress de TouchableOpacity sera invoqué.

Ce que vous pouvez faire est que vous pouvez setState sur le composant et sur le cycle de rendu suivant vous pouvez passer l'événement à votre EpubDocumentReader.

<TouchableOpacity 
    onPress={(e) => { 
     console.log(e.nativeEvent); 
     this.setState({ 
      event: e 
     }) 
    }} 
    style={{ flex: 1 }} 
> 
    <EpubDocumentReader 
     event={this.state.event} 
     toggleEditHighlightModal={this.toggleEditHighlightModal} 
     onPress={(cfi, contents) => { 
      console.log(cfi); 
     }} 
     styleWidthBook={styleWidthBook} 
    /> 
</TouchableOpacity> 

Bien sûr, vous devez avoir initialState dans votre constructeur.

constructor(props){ 
    super(props) 
    this.state = { 
    event: null 
    } 
}