0
208
Views¿Por qué snapToInterval no funciona para matrices más largas en la lista plana?
por alguna razón snapToInterval no se ajusta correctamente
código:
const ITEM_HEIGHT=60 <FlatList data={Array(150) .fill('') .map((_, index) => ({ key: index, title: index.toString() }))} renderItem={({ item }) => ( <View style={{ height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center' }}> <Text >{item.title}</Text> </View> )} getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })} initialScrollIndex={21} initialNumToRender={10} /> y así es como se ve:
¿Cómo puedo solucionar esto?
·
Juan Pablo Isaza
2 answers
Answer question0
tienes que configurar
ajustar a intervalo
prop a la altura de su artículo "60". no necesita getItemLayout si no desea utilizar los métodos snaptoindex o scrollToItem de flatlist. Además, creo que olvidaste establecer el valor de ITEM_HEIGHT en tu accesorio getItemLayout.
·
Juan Pablo Isaza
Report
0
Resolví el problema desde aquí .
simplemente agregue snapToOffsets como este:
const ITEM_HEIGHT=60 <FlatList data={Data} renderItem={({ item }) => ( <View style={{ height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center', }}> <Text style={{ fontWeight: 'bold',color:'white' }}>{item.title}</Text> </View> )} keyExtractor={(_, index) => index.toString()} getItemLayout={(_, index) => { return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT* index, index }; }} initialScrollIndex={21} showsVerticalScrollIndicator={false} initialNumToRender={3} windowSize={9} snapToOffsets={Data.map((x, i) => (i*ITEM_HEIGHT))} />
·
Juan Pablo Isaza
Report
Answer question