如何控制FlatList的initialScrollIndex视图位置，实现初始显示当前项+前一项

你完全可以不用依赖scrollToIndex来实现这个效果，FlatList本身就提供了initialViewPosition属性，配合initialScrollIndex就能直接在初始挂载时达到你想要的视图定位，完全避免首次挂载的卡顿问题。

原理说明 #

当你设置initialScrollIndex为目标选中项的index（比如你的例子里的3），再把initialViewPosition设为1，这会让目标项对齐FlatList的底部，这样它的上一项自然就会显示在上方区域，正好满足你"选中项+上一项"的显示需求。

修改后的完整代码 #

import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default class App extends Component {
  getItemLayout = (_, index) => ({ index, length: 600, offset: 600 * index });
  
  renderItem = ({ index }) => {
    const backgroundColor = index === 0 ? "blue" : index === 1 ? "red" : index === 2 ? "green" : index === 3 ? "yellow" : "white";
    return (
      <View style={{ height: 600, backgroundColor, width: 450, justifyContent: "center", alignItems: "center" }}>
        <Text>{`item${index}`}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ ...StyleSheet.absoluteFillObject }}>
          <FlatList 
            keyExtractor={(_, index) => `${index}`} 
            getItemLayout={this.getItemLayout} 
            data={["yo", "1", "2", "3", "4"]} 
            renderItem={this.renderItem}
            // 核心配置：初始滚动到index3，并且让该项对齐底部
            initialScrollIndex={3}
            initialViewPosition={1}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

关键细节 #

• 一定要确保getItemLayout是正确实现的，因为FlatList需要它来准确计算初始滚动的偏移量，这是initialScrollIndex和initialViewPosition能正常工作的前提。
• initialViewPosition的取值范围是0到1：0表示目标项对齐顶部，1表示对齐底部，0.5表示居中。这里设为1正好符合你的需求。

这样修改后，FlatList会在首次挂载时直接渲染到指定位置，完全不需要等待componentDidMount或者使用定时器，也就不会有卡顿的问题了。

内容的提问来源于stack exchange，提问作者Leomar Amiel