flatlist - React Native Touchable deshabilita ScrollView

flatlist react native

Question

Soy nuevo en React Native, así que probablemente estoy preguntando algo muy obvio, pero por favor ayuda.

Tengo una vista envuelta en un toque, de modo que toda el área responde al golpeteo. Luego, tenga un ScrollView anidado dentro de la vista. La estructura general es algo como esto:

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

Cuando se compila y se ejecuta, se detecta el golpeteo, pero la vista de desplazamiento no se desplaza en absoluto. Hice que el código anterior fuera breve y simple, pero cada componente tiene el estilo adecuado y puedo ver que todo se procesa bien y el texto largo se corta en la parte inferior de ScrollView. Por favor ayuda.

¡Gracias!

Answer 1

Eso es escribir, no se puede tener una vista de desplazamiento dentro de TouchableWithoutFeedback, es propiedad de reaccionar nativo que lo desactivará, puede tener su vista de desplazamiento fuera de la pestaña TouchableWithoutFeedback y agregar los otros contenidos que desee al hacer clic dentro de una vista etiqueta.

También puede usar los Aspectos destacados de Touchable en su lugar, si el TouchableWithoutFeedback no funciona.

Answer 2

Creo que el uso de scrollview no es bueno en tu código. Puede ajustar la vista de desplazamiento dentro de una vista como

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

  </ScrollView>
</View>

Answer 3

Puede tener un scrollView o FlatList dentro de un Touchable sin retroalimentación. Aunque no deberías, pero algunas veces no tienes otra opción para ir. Echar un buen vistazo a estas preguntas y respuestas lo valida. Haga clic en modo nativo haciendo clic en superposición , cómo descartar modal tocando la pantalla en reaccionar nativo .

Para la Pregunta, la única forma en que puede hacer que funcione (al menos que yo sepa), o la forma más simple es agregar una TouchableOpacity alrededor de Texto en su código como este,

 <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 es un envoltorio para hacer que las Vistas respondan correctamente a los toques, así que puedes modelarlo de la forma en que habrías diseñado tu Componente de Vista y luego configurar algunos de sus objetos especiales en lo que desees, por ejemplo activeOpacity, etc. Moreso puedes usar TouchableHighlight funciona , pero recibe un elemento hijo, es decir, encierra todo su componente dentro de uno principal.

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>