React Native中Flatlist如何加载指定数据项作为初始展示页

以下方案适配React Native框架下的FlatList组件，满足初始定位到第50条、上下滚动功能正常的需求：

1. 首选方案：使用内置属性实现（列表项高度固定场景） #

FlatList原生提供initialScrollIndex属性可直接指定初始滚动位置，无需额外监听事件：

• 核心属性说明：
  • initialScrollIndex：传入要定位的项的下标，注意下标从0开始，定位第50条传入49即可
  • initialNumToRender：可选配套属性，建议调整为略大于目标下标的值（比如设置为60），避免初始渲染时目标位置内容未加载出现白屏
  • getItemLayout：如果列表项高度固定，加上该属性可提升定位精准度、优化渲染性能

示例代码：

import { FlatList, Text } from 'react-native';

// 模拟100+条数据源
const dataList = [...Array(120).keys()].map(i => ({
  id: i,
  content: `第${i+1}条数据`
}));

const MyList = () => {
  return (
    <FlatList
      data={dataList}
      keyExtractor={item => item.id.toString()}
      renderItem={({item}) => <Text style={{height: 50, paddingHorizontal: 16}}>{item.content}</Text>}
      {/* 核心配置：初始定位到第50条 */}
      initialScrollIndex={49}
      initialNumToRender={60}
      {/* 列表项高度固定为50时的配置，可根据实际高度调整 */}
      getItemLayout={(data, index) => ({
        length: 50,
        offset: 50 * index,
        index
      })}
    />
  )
}

2. 兼容方案：实例方法调用（列表项高度不固定场景） #

如果列表项高度是动态的，直接用initialScrollIndex可能出现偏移，可以通过FlatList实例的scrollToIndex方法实现：

• 实现逻辑：通过ref保存FlatList实例，等列表布局完成后触发无动画滚动到目标位置
  示例代码：

import { useRef } from 'react';
import { FlatList, Text } from 'react-native';

const dataList = [...Array(120).keys()].map(i => ({
  id: i,
  content: `第${i+1}条数据，动态高度内容\n换行内容测试`
}));

const MyList = () => {
  const flatListRef = useRef(null);

  const handleListLayout = () => {
    // 列表布局完成后滚动到第50项，关闭动画避免用户感知
    flatListRef.current?.scrollToIndex({
      index: 49,
      animated: false
    });
  }

  // 可选：处理滚动目标未渲染的异常场景
  const handleScrollFailed = (info) => {
    setTimeout(() => {
      flatListRef.current?.scrollToIndex({
        index: info.index,
        animated: false
      });
    }, 100);
  }

  return (
    <FlatList
      ref={flatListRef}
      data={dataList}
      keyExtractor={item => item.id.toString()}
      renderItem={({item}) => <Text style={{padding: 16}}>{item.content}</Text>}
      onLayout={handleListLayout}
      onScrollToIndexFailed={handleScrollFailed}
    />
  )
}

两种方案均不会影响列表后续的上下滚动交互，所有原生滚动逻辑都可以正常使用。

内容的提问来源于stack exchange，提问作者Cool Dunno