时间戳

首页 > 解决方案 > FlatList在水平模式（RTL）下数据太大时自动滚动到第一

android - FlatList在水平模式（RTL）下数据太大时自动滚动到第一

问题描述

环境

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 1.35 GB / 7.87 GB
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312

反应原生版本：0.60.4

代码

<FlatList
    style={{
        flexDirection: 'row',
        marginHorizontal: -wp('3%'),
        zIndex: 40
    }}
    initialNumToRender={10}
    data={this.state.data}
    horizontal={true}
    key={item => item.groupNo}
    keyExtractor={(item, index) => index.toString()}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    ref={ref => (this.flatList = ref)}
    renderItem={({ item }) => (
        <Item item={item} />
    )}
/>

重现步骤

  1. 向我的 FlatList 添加了一些数据
  2. 将 Horizo​​ntal={true} 属性添加到平面列表
  3. 放I18nManager.allowRTL(true)
  4. 放I18nManager.forceRTL(true)
  5. 让我的 renderItem 组件扩展为 PureComponent。
  6. 使用真正的安卓设备

正如您在下面看到的，当我的应用程序在 RTL 方向上运行时会FlatList自动滚动到列表的顶部/第一个，但 LTR 方向是可以的！

右转：

RTL_GIF

长期运输：

LTR_GIF

标签： androidreact-nativereact-native-flatlist

解决方案

我也有同样的这个问题，我的解决方案（你将它们添加到你的平面列表中）。希望能帮到你。此链接可能会帮助您改进您的列表： https ://github.com/filipemerker/flatlist-performance-tips

getItemLayout={(data, index) => (
        { length: LECTURE_ITEM_HEIGHT, offset: LECTURE_ITEM_HEIGHT * index, index }
      )}
maxToRenderPerBatch={20}
initialNumToRender={10}
windowSize={10}
removeClippedSubviews={true}

推荐阅读