es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React Native: Deshabilitar el desplazamiento del FlatList padre y habilitar el desplazamiento del FlatList hijo.

React Native: Deshabilitar el desplazamiento del FlatList padre y habilitar el desplazamiento del FlatList hijo.

26 Jul, 2023 Programación

Necesito desactivar el desplazamiento del padre FlatList (el desplazamiento se implementará al presionar el botón) y activar el desplazamiento del hijo FlatList. Debido a que establecí scrollEnabled={false} para el padre FlatList, el desplazamiento no funciona para el hijo FlatList. ¿Cómo solucionar este problema?

const data = [
    { type: 'lista', data: ['Manzana', 'Plátano', 'Pera', 'Naranja', 'Uva', 'Piña']},
    { type: 'lista', data: ['Bicicleta', 'Coche', 'Tren', 'Avión', 'Barco', 'Cohete']}
];

return (
  <flatlist data="{data}" keyextractor="{item" ==""> item.id}
    renderItem={({item}) => {
        return <flatlist data="{item.data}" keyextractor="{item" ==""> item.id}
          numColumns={item.data.length} // horizontal
          renderItem={({item}) => (
            <view style="{{width:" width,="" height:="" 50,="" alignitems:="" 'center',="" justifycontent:="" 'center'}}="">
                <text>{item}</text>
            </view>
          )
          }
          pagingEnabled
        />;
    }}
    horizontal
    pagingEnabled
    scrollEnabled={false}
  />
);

Ejemplo de código: Código Snack de ejemplo

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver este problema, puedes envolver el componente hijo FlatList con un componente ScrollView y establecer la propiedad scrollEnabled en true en el componente ScrollView. El componente ScrollView manejará el desplazamiento para el componente hijo FlatList, mientras que el FlatList padre permanecerá con scrollEnabled={false}.

    Aquí tienes un fragmento de código actualizado:

    import { ScrollView } from 'react-native';

// ...

return (
  <flatlist data="{data}" keyextractor="{item" ==""> item.id}
    renderItem={({ item }) => {
      return (
        <scrollview scrollenabled="{true}">
          <flatlist data="{item.data}" keyextractor="{item" ==""> item.id}
            numColumns={item.data.length} // horizontal
            renderItem={({ item }) => (
              <view style="{{" width:="" width,="" height:="" 50,="" alignitems:="" 'center',="" justifycontent:="" 'center',="" }}="">
                <text>{item}</text>
              </view>
            )}
            pagingEnabled
          />
        </flatlist></scrollview>
      );
    }}
    horizontal
    pagingEnabled
    scrollEnabled={false}
  />
);

    [Código de ejemplo en Snack][1]

    Con este enfoque, el desplazamiento será manejado por el componente ScrollView, pero solo para el componente hijo FlatList. El FlatList padre permanecerá con desplazamiento desactivado bajo la propiedad scrollEnabled.

Comments are closed.