Wie „Stack“ Touch-Ereignisse in Reaktion india

Question

Ich habe einen Feed von Elementen, die etwa wie folgt aussieht:

, was ich zu erreichen versuchen:

Wenn der Benutzer Wenn Sie ein Element im Feed drücken (dargestellt durch die schwarze Box), werden sie auf eine separate Seite für diesen Artikel gebracht. Wenn der Benutzer auf das Sternsymbol klickt, kann er das Element "favorisieren".

Wie ich versuche, es zu tun:

Ich bin derzeit versucht, dies durch s nisten zwei TouchableOpacity‘(durch die schwarzen Kästchen dargestellt) zu implementieren, wobei die innere/Kind TouchableOpacity hat einen zIndex: 2 Stil angewendet zu ihm.

Der Stil zIndex scheint dem Kindcontainer keine Priorität für Berührungsereignisse zu geben, also fragte ich mich, ob jemand weiß, wie ich dieses Muster implementieren kann. Ich denke, ich könnte die PanResponder verwenden müssen, aber es scheint wie eine sehr ausführliche Möglichkeit, diese Funktionalität hinzuzufügen.

Alle Kommentare oder Beispiele würden sehr geschätzt werden! Vielen Dank.

Answer 1

kann man nicht einfach Nest TouchableOpacity ein TouchableOpacity in Ihren Eltern:

soll wie folgt strukturiert sein? Ich habe ein Modell-Projekt getan und dies scheint unter

<View> 
    <TouchableOpacity 
     style = {{backgroundColor: 'red', height: 100}} 
     onPress = {() => {console.log("PARENT METHOD")}}> 
      //content 
      <TouchableOpacity 
       style = {{width: 30, height: 30, backgroundColor: 'yellow', 
             position: 'absolute', right: 5, bottom: 5}} 
       onPress = {() => {console.log("CHILD METHOD")}}> 
       //content 
      </TouchableOpacity> 
     </TouchableOpacity> 
</View> 

ich Protokolle verwendet habe, zu arbeiten, und wenn die kleine verschachtelte Box gedrückt wird, werden nur Kind Verfahren angemeldet, und in ähnlicher Weise für, wenn ich die übergeordnete Ansicht drücken.

Log-Ausgang: unabhängige zeigt berührt

Lassen Sie mich wissen, ob dies

Answer 2

Warum nicht so etwas wie unten:

<View style={{flex-direction: "row"}}> 
    <View> 
     <TouchableOpacity onPress={this.goToDetails.bind(this)}> 
     </TouchableOpacity> 
    </View> 
    <View> 
     <TouchableOpacity onPress={this.goToDetails.bind(this)}> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.favoriteItem.bind(this)}> 
     </TouchableOpacity> 
    </View> 
</View> 

Wo zwei Ansichten in einer Reihe haben, den ersten Blick hat man TouchableOpacity, und die zweite Ansicht hat zwei TouchableOpacity s in aa Spalte (wo erste ist ähnlich vorhergehende TouchableOpacity, und die Sekunde ist, das Einzelteil zu bevorzugen).