nidificati Touchable con la posizione assoluta

Question

devo implementare un'interfaccia in cui un oggetto è selezionabile, ma una superficie di questo oggetto fa un'altra azione, come questo:

|-----------| 
|  | | -> clicking on this small area does an action 
|  ---| 
|   | 
|   | 
|   | -> clicking on this area does another action 
|   | 
|-----------| 

feci un'implementazione simile questa struttura:

<View> // Container 
    <Touchable onPress={do X}> // Large area 
    <Touchable onPress={do Y} style={{position: absolute, top: 0, right: 0}}> // Small area 
</View> 

Il problema è che la piccola area non attiva mai i puntelli onPress. L'evento è sempre attivato sulla vasta area.

Qualcuno può aiutarmi con questo?

Grazie!

Answer 1

Non sono sicuro di avere uno stile da mostrare per il contenitore piccolo, ma se non c'è larghezza o altezza, non si innescherà, quindi controlla di aver impostato larghezza e altezza:

smallContainer: { 
    width: 120, // set this 
    height:100, // set this 
    position:'absolute', 
    top:0, 
    right:0 
} 

Ho impostato il funzionamento here. Il codice è anche sotto.

https://rnplay.org/apps/StpOXg

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} = React; 

var SampleApp = React.createClass({ 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={{flexDirection:'row'}}> 
      <TouchableHighlight onPress={() => alert('largeContainer') } style={styles.container1}> 
        <View><Text>Hello1</Text></View> 
      </TouchableHighlight> 
      <TouchableHighlight onPress={() => alert('smallContainer') } style={styles.container2}> 
       <View><Text>Hello2</Text></View> 
      </TouchableHighlight> 
     </View> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    container1: { 
    width:320, 
    height:300, 
    backgroundColor: 'red' 
    }, 
    container2: { 
    width: 120, 
    height:100, 
    position:'absolute', 
    backgroundColor: 'green', 
    top:0, 
    right:0 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Answer 2

Ci sono alcuni possibili problemi che posso immaginare potrebbero andare storto.

1. solo per assicurarsi che non sia ovvio: il secondo div ha altezza/larghezza? Se è pari a zero, non sarai in grado di toccarlo. Presumo che questo non sia il caso, quindi più probabile,
2. Sei sicuro che entrambi i gestori non si attivano? L'evento può essere propagato sulla catena se non si chiama event.stopPropagation() nel gestore eventi del div più piccolo/interno. In questo caso, potrebbe eseguire il primo gestore e quindi propagare al secondo gestore.
3. In base a tutti i css, potrebbe esserci un problema con z-index o elementi nascosti che limita il primo div al di sopra del secondo div o nasconde il secondo div del tutto (display: none).

---

parte:

Una cosa difficile che a volte può influenzare voi è che reagiscono implementa i propri eventi al di là degli eventi browser nativo. Ciò significa che se si chiama stopPropagation() sull'evento che si ottiene nel gestore React, si interrompe la propagazione dell'evento React, ma non dell'evento del browser sottostante. Quindi, se per qualche motivo hai un gestore per l'evento esterno a React (usando JS o jQuery per aggiungere gestori di eventi invece di reagire), i gestori non React si attiveranno ancora dopo aver fatto un stopPropagation(). Non penso che questo sia il tuo problema qui.