React Native: TouchableOpacity onPress problemi all'interno di ScrollView

Question

Sono in esecuzione reagire nativo 0.24.1 e sto riscontrando un problema con il componente <TouchableOpacity> quando si trova all'interno di un <ScrollView>.

I suoi onPress eventi vanno bene ma c'è un caso speciale quando non lo fanno. Se con il componente <TouchableOpacity> si dispone di un <TextInput> e lo stato attivo si trova sulla casella <TextInput>, è possibile fare clic su <TouchableOpacity> e vedrete l'evento onPress NON verrà attivato.

Almeno la prima volta che lo fai. Una volta che lo stato attivo NON è più nello <TextInput>, è ora possibile premere sul componente <TouchableOpacity> e l'evento onPress verrà attivato correttamente.

Si noti che se il componente <TouchableOpacity> è inserito all'interno di <View> anziché <ScrollView>, tutto funziona come previsto e il problema precedente non si applica.

Ecco il codice per dimostrare il problema:

const React = require('react-native'); 
const { 
    Component, 
    Dimensions, 
    View, 
    ScrollView, 
    Text, 
    TextInput, 
    TouchableOpacity, 
} = React; 


// ---------------------------------------------------------------------------- 
class TouchableOpacityTest extends Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0}; 
    } 
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
    onPressEvent(what,e) { 
    console.log('what:',what); 
    let newState = {}; 
    newState['count_'+what] = ++this.state['count_'+what]; 
    this.setState(newState); 
    } 
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
    render() { 
    let touchableProps = { 
     onPress: this.onPressEvent.bind(this,'onPress'), 
     onPressIn: this.onPressEvent.bind(this,'onPressIn'), 
     onPressOut: this.onPressEvent.bind(this,'onPressOut'), 
     onLongPress: this.onPressEvent.bind(this,'onLongPress'), 
    } 

    return (
     <View style={{flex:1,flexDirection:'column',justifyContent:'flex-start',alignItems:'center',backgroundColor:'blue'}} > 
     <ScrollView style={{width:Dimensions.get('window').width*0.9,backgroundColor:'red'}}> 
      <TextInput style={{backgroundColor:'rgb(200,200,200)',marginTop:14}} 
      placeholder="Focus on me,hide keyboard,and click on text below" 
      autoCorrect={false} 
      /> 
      <TouchableOpacity {...touchableProps} > 
      <Text style={{fontSize:20,backgroundColor:'pink',marginTop:14}}> 
       Click on me!{"\n"} 
       onPress:{this.state.count_onPress}{"\n"} 
       onPressIn:{this.state.count_onPressIn}{"\n"} 
       onPressOut:{this.state.count_onPressOut}{"\n"} 
       onLongPress:{this.state.count_onLongPress}{"\n"} 
      </Text> 
      </TouchableOpacity> 
     </ScrollView> 
     </View> 
    ); 
    } 
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
} 
// ---------------------------------------------------------------------------- 
AppRegistry.registerComponent('react_native_app1',() => TouchableOpacityTest); 

si può rimpiazzare il <ScrollView> con un componente <View> sul codice di cui sopra e vedrete che onPress generato l'evento ogni volta, anche quando la messa a fuoco è sul <TextView>

NOTA: sto lavorando su Android. Non ho idea se questo accade anche su iOS.

NOTA 2: Secondo Aakash Sigdel, questo è davvero accadendo su iOS troppo.

Answer 1

Impostare keyboardShouldPersistTaps={true} sul ScrollView.

risposta Duplicate qui: https://stackoverflow.com/a/34290788/29493

UPDATE: Come Hossein scrive nella sua risposta, true|false è stato sconsigliato nelle versioni più recenti a favore di always|never|handled.

Answer 2

Set keyboardShouldPersistTaps='always' per gli oggetti di scena ScrollView.

Reagire Documentazione Native:

'mai' (il default), toccando al di fuori del metodo di scrittura concentrati quando la tastiera è in respinge la tastiera. Quando ciò accade, i bambini non riceveranno il rubinetto.

'sempre', la tastiera non si chiude automaticamente e la vista di scorrimento non cattura i tocchi, ma i bambini della vista di scorrimento possono catturare i tocchi.

'gestito', la tastiera non si chiude automaticamente quando il tocco è stato gestito da un bambino (o catturato da un antenato).

false, deprecato, utilizzare "mai" invece.

true, deprecato, utilizzare "sempre" invece.