android - 当水平模式(RTL)下数据太大时,FlatList 会自动滚动到第一个

标签 android react-native react-native-flatlist

环境

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

React Native 版本: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} 属性添加到 flatlist
  3. 设置I18nManager.allowRTL(true)
  4. 设置I18nManager.forceRTL(true)
  5. 使我的 renderItem 组件扩展为 PureComponent。
  6. 使用真正的 Android 设备

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

RTL:

RTL_GIF

LTR:

LTR_GIF

最佳答案

我也有同样的问题和我的解决方案(您将它们添加到您的 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}

关于android - 当水平模式(RTL)下数据太大时,FlatList 会自动滚动到第一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58099908/

相关文章:

reactjs - React js getDerivedStateFromProps 正在连续调用

reactjs - 在 FlatList 中显示图像

react-native - 滚动时禁用 TouchableOpacity 突出显示

javascript - React Native FlatList 添加新项目时跳到顶部

javascript - 从 native 代码访问 WebView 的 localStorage

reactjs - 使用 Jest 测试 React 组件会出现 'Cannot find module' 错误

android - Android 在 iOS 上有像 clipsToBounds 这样的属性吗?

react-native - 根据用户的身份验证重定向用户

java - 安卓工作室 "hidpi=true"不工作

javascript - Phonegap : Camera. getPicture 只返回 NATIVE_URI