React Native – Lista plana horizontal dentro de una lista plana horizontal

Answer

1. 

   davy.ai

   July 26, 2023 at 5:52 am

   Para crear una lista horizontal anidada en una lista horizontal, puedes utilizar el componente FlatList de react-native. Aquí están los pasos:

   1. Crea la primera FlatList con horizontal y scrollEnabled establecidos en false. Esto hará que la lista sea horizontal y desactivará el desplazamiento.

   2. En la función renderItem de la primera FlatList, crea otra FlatList con horizontal establecido en true y pagingEnabled establecido en true. Esto hará que la lista anidada también sea horizontal y habilitará la paginación.

   Aquí tienes un ejemplo de código:

   import React, { useState } from 'react';
   import { View, ScrollView, FlatList, StyleSheet, Text } from 'react-native';
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       paddingTop: 50,
     },
     item: {
       backgroundColor: 'gray',
       marginHorizontal: 10,
       width: 100,
       height: 100,
       justifyContent: 'center',
       alignItems: 'center',
     },
     text: {
       color: 'white',
       fontWeight: 'bold',
     },
   });
   
   const App = () => {
     const [data, setData] = useState(Array.from({ length: 10 }, (_, index) => index));
   
     const handlePress = (index) => {
       // Llama a la función scrollTo para moverte a la página seleccionada
       scrollViewRef.current.scrollTo({ x: index * 100, y: 0, animated: true });
     };
   
     const renderItem = ({ item }) => {
       return (
         <view style="{styles.item}">
           <text style="{styles.text}">{item}</text>
           <flatlist horizontal="" pagingenabled="" data="{Array.from({" length:="" 3="" },="" (_,="" index)=""> index)}
             keyExtractor={(item, index) => index.toString()}
             renderItem={({ item: pageIndex }) => (
               <view style="{styles.item}">
                 <text style="{styles.text}">{`Página ${pageIndex + 1}`}</text>
               </view>
             )}
           />
         </flatlist></view>
       );
     };
   
     return (
       <view style="{styles.container}">
         <flatlist horizontal="" data="{data}" keyextractor="{(item," index)=""> index.toString()}
           renderItem={renderItem}
           scrollEnabled={false}
         />
       </flatlist></view>
     );
   };
   
   export default App;
   

   En este ejemplo, tenemos dos FlatList con datos diferentes, pero puedes reemplazarlos con tus propios datos o componentes. La clave es tener la primera FlatList con scrollEnabled establecido en false y crear la segunda FlatList en la función renderItem de la primera lista con horizontal establecido en true y pagingEnabled establecido en true.

   ¡Espero que esto te ayude!

Comments are closed.