0
268
Vistas¿Cómo crear un pergamino infinito en reaccionar nativo?
Estoy tratando de crear un año seleccionado desplazándome por algo como esto:
Necesito que el desplazamiento vaya en ambos sentidos hasta quizás de 0 a 9999, obviamente no puedo almacenar tanto valor en una sola matriz para una <Flatlist>
así que improvisé y lo hice de tal manera que después de llegar al final volviera a la parte superior
y restablecí a lo que sea que el año pasado fue +10 y me dio esto:
imp parte del código fuente:
function setrange(from = 2000, to=2010){ let temp_arr = [{ key: 0, title: '' }];//so that the selected item always stays in middle let k=1; for (let i = from; i <= to; i++) temp_arr.push({ key: k++, title: i}) temp_arr.push({ key: k , title: '' });//so that the selected item always stays in middle setDATA(temp_arr); } const [DATA, setDATA] = useState(...); <FlatList onEndReached={() => { setrange(from=DATA[DATA.length-2]['title'],to=DATA[DATA.length-2]['title']+10); Scrollref.current.scrollToIndex({ animated: false, index: 0 });}} data={DATA} ref={Scrollref} ... />el código fuente completo
Entonces, ¿cómo hago para que parezca un pergamino infinito sin detenerse o perder el impulso del pergamino en el medio?
(también, por favor, no recomiende una biblioteca externa si es posible)
1 Respuestas
Responde la pregunta0
En realidad, no necesita crear su propia implementación de carga diferida si solo está representando textos sin formato con altura estática, ya que FlatList ya tiene uno incorporado. Solo necesita jugar con sus accesorios para que sea perfecto para su caso de uso.
La creación de una matriz con 10000 elementos, por supuesto, le cuesta un poco de memoria (en realidad es más bajo de lo que esperaba), pero depende de usted si quiere todo el rendimiento.
Aquí hay un bocadillo para probarlo: https://snack.expo.dev/@truetiem/date-picker
const ITEM_HEIGHT = 60; const SEPERATOR_HEIGHT = 1; <FlatList data={Array(9999) .fill('') .map((_, index) => (index + 1).toString())} renderItem={({ item }) => ( <View style={{ height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center', }}> <Text style={{ fontWeight: 'bold' }}>{item}</Text> </View> )} ItemSeparatorComponent={() => ( <View style={{ height: SEPERATOR_HEIGHT, width: '100%', backgroundColor: '#ccc' }} /> )} keyExtractor={(_, index) => index.toString()} getItemLayout={(_, index) => ({ length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) + (SEPERATOR_HEIGHT * index), index, })} initialScrollIndex={2019} initialNumToRender={10} windowSize={9} showsVerticalScrollIndicator={false} snapToInterval={ITEM_HEIGHT + SEPERATOR_HEIGHT} snapToAlignment={"center"} />