javascript - 如何在本机反应中创建无限滚动？

问题描述

我试图通过滚动这样的东西来创建一个选定的年份：

我需要滚动双向直到可能 0 到 9999，显然我不能在单个数组中存储那么多值<Flatlist>

所以我即兴创作并使它在到达终点后滚动回顶部
并重置为去年的+10，它给了我这个：

imp 部分源代码：

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}
    ...
/>

完整的源代码

那么如何让它看起来像一个无限滚动而不停止或失去滚动动力呢？
（如果可能，请不要推荐外部库）

标签： javascriptreactjsreact-native

如果您只渲染具有静态高度的纯文本，您实际上不需要创建自己的延迟加载实现，因为 FlatList 已经内置了一个。您只需要使用它的道具即可使其完美适合您的用例。

创建一个包含 10000 个项目的数组当然会消耗一些内存（它实际上比您预期的要低），但是，您是否想要每一点性能都取决于您。

这是一个测试它的零食：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"}
/>

javascript - 如何在本机反应中创建无限滚动？

问题描述

解决方案

推荐阅读