Question

我的 React Native 应用程序中有这个类别过滤器组件。第一次加载此组件时，它不会滚动到给定的索引项（即 3）。我检查过，函数 scrollToIndex 正在调用。但是在加载屏幕后，组件重新渲染它正在工作。

为什么在第一次加载屏幕时不向下滚动？

import React, { useCallback, useRef } from 'react'
import { StyleSheet, TouchableOpacity, FlatList, View } from 'react-native'
import { Badge, Text } from 'native-base'
import { connect } from 'react-redux'
import * as categoryActions from '../../Redux/Actions/categoryActions'
import { useFocusEffect } from '@react-navigation/native'

const CategoryFilter = (props) => {
  const flatlistRef = useRef()

  const handleSetSelectedCategoryId = (categoryId) => {
    props.setSelectedCategoryId(categoryId)
  }

  const getItemLayout = (data, index) => ({
    length: 50,
    offset: 50 * index,
    index,
  })

  const scrollToIndex = () => {
    console.log('scroll to index called !')
    let index = 3
    flatlistRef.current.scrollToIndex({ animated: true, index: index })
  }

  useFocusEffect(
    useCallback(() => {
      scrollToIndex()
    }, [])
  )

  const renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        key={item._id}
        onPress={() => {
          handleSetSelectedCategoryId(item._id)
        }}
      >
        <Badge
          style={[
            styles.center,
            { margin: 5, flexDirection: 'row' },
            item._id == props.selectedCategoryId
              ? styles.active
              : styles.inactive,
          ]}
        >
          <Text style={{ color: 'white' }}>{item.name}</Text>
        </Badge>
      </TouchableOpacity>
    )
  }

  return (
    <View>
      <FlatList
        data={props.categories}
        renderItem={renderItem}
        keyExtractor={(item) => item._id}
        horizontal={true}
        ref={flatlistRef}
        getItemLayout={getItemLayout}
      />
    </View>
  )
}
....

Answer 1

我遇到了类似的问题，这是我的发现：

在 flatlist 使用 getItemLayout 完成对项目大小的计算之前，似乎可能存在一种竞争条件，即 scrollToIndex 发生。因此它不会抛出超出范围的错误并认为滚动成功。

一种解决方案是：

setTimeout(() => scrollToIndex(), 500);

然而，这不是一个很好的解决方案，因为不能保证 flatlist 会在任意给定的 500 毫秒内“准备好”滚动，这意味着我们的延迟调用仍然不起作用。

推荐方式：

在 FlatList 上设置 initialScrollIndex 和我们要滚动到的索引。

数据数组（传递给 FlatList）需要已经有您要查找的索引，否则您会得到超出范围的错误。

您还应该注意（来自文档）：

<块引用>

这会禁用“滚动到顶部”优化，该优化使第一个 initialNumToRender 项目始终呈现并立即呈现从该初始索引开始的项目。

更多信息在这里：https://reactnative.dev/docs/flatlist#initialscrollindex

首次加载屏幕时，React Native FlatList scrollToIndex() 不起作用

1 个答案: