React Native Touchable disabilita ScrollView

Question

Sono nuovo di React Native, quindi probabilmente sto chiedendo qualcosa di molto ovvio, ma per favore aiutatemi.

Ho una vista avvolta in un testo tangibile, in modo che l'intera area risponda al tocco. Quindi avere uno ScrollView annidato all'interno della vista. La struttura generale è qualcosa di simile:

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}> 
    <View> 
     <ScrollView> 
      <Text>Hello, here is a very long text that needs scrolling.</Text> 
     <ScrollView> 
    </View> 
</TouchableWithoutFeedback> 

Quando questo viene compilato ed eseguito, viene rilevato le intercettazioni, ma la vista di scorrimento non scorre affatto. Ho reso il codice di cui sopra breve e semplice, ma ogni componente ha lo stile corretto e posso vedere tutto che rende bene e il testo lungo è tagliato nella parte inferiore del ScrollView. Per favore aiuto.

Grazie!

Answer 1

Questo è il tipo di scrittura, non è possibile avere una vista a scorrimento all'interno del TouchableWithoutFeedback, è la proprietà di reagire nativo che lo disabiliterà, è possibile invece avere la vista di scorrimento all'esterno della scheda TouchableWithoutFeedback e aggiungere gli altri contenuti desiderati sul fai clic all'interno di un tag vista.

È inoltre possibile utilizzare i Punti salienti toccabili, se il TouchableWithoutFeedback non funziona.

Answer 2

Penso che l'uso di scrollview non sia buono nel codice. Puoi avvolgere lo ScrollView all'interno di una Vedi come

<View> 
    <ScrollView> 
     <TouchableX> 
     <View> 
      <Text></Text> 
     </View> 
     </TouchableX> 

    </ScrollView> 
</View> 

Answer 3

Si può avere uno ScrollView o FlatList all'interno di un TouchableWithoutFeedback. Non dovresti, ma a volte non hai altra scelta da fare. Dare una buona occhiata a queste domande e risposte lo conferma. close react native modal by clicking on overlay, how to dismiss modal by tapping screen in react native.

per la domanda, l'unico modo è possibile farlo funzionare (almeno che io sappia), o il modo più semplice è quello di aggiungere un TouchableOpacity intorno al testo nel codice come questo,

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}> 
    <View> 
     <ScrollView> 
      <TouchableOpacity> 
      <Text>Hello, here is a very long text that needs scrolling.</Text> 
      </TouchableOpacity> 
     <ScrollView> 
    </View> 
</TouchableWithoutFeedback> 

Nota: TouchableOpacity è un wrapper per fare in modo che Views risponda correttamente ai tocchi in modo che tu possa ridisegnarlo come se avessi designato il componente View, quindi impostare alcuni dei suoi oggetti speciali su qualsiasi cosa desideri, ad esempio ActiveOpacity, ecc. Moreso puoi usare TouchableHighlight ma funziona riceve un elemento figlio cioè racchiudi tutto il tuo componente all'interno di uno genitore.

Answer 4

I'm using this structure it's working for me: 

<TouchableWithoutFeedback onPress={() => {}}> 
    {other content} 
    <View onStartShouldSetResponder={() => true}> 
     <ScrollView> 
      {scrollable content} 
     </ScrollView> 
    </View> 
</TouchableWithoutFeedback>