react-native - initialScrollIndex 不适用于 FlatList react 原生

Question

我遇到了 FlatList 的 initialScrollIndex 问题——initialScrollIndex 的参数被简单地忽略并显示了第一项。

https://snack.expo.io/Bk1mkK0zZ

Answer 1

我遇到了完全相同的问题，这就是我发现您的问题的原因。经过大量测试，我找到了一个解决方法，它似乎有效。而不是使用 initialScrollIndex我使用了函数 scrollToIndex一旦列表呈现。将它应用于您的代码，它看起来像

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

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

export default class App extends Component {

  render() {
    const data = [{id: 0},{id: 1},{id: 2},{id: 3},{id: 4}];

     return (
      <View onLayout={() => this.onLayout()}>
        <FlatList
          ref={el => this.list = el}
          data={data}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}

          pagingEnabled={true}
          horizontal={true}
          showsHorizontalScrollIndicator={false}

          getItemLayout={this.getItemLayout}

          debug={true}
        />
      </View>
    )
  }

  onLayout() {
    this.list.scrollToIndex({index: 2})
  }

  renderItem = ({ item }) => {
    return (
      <View style={{flex: 1, backgroundColor: 'lightblue', width: WIDTH, height: HEIGHT, justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{color: 'white', fontSize: 300, fontWeight: 'bold'}}>{item.id}</Text>
      </View>
    );
  };

  getItemLayout = (data, index) => (
    {length: WIDTH, offset: WIDTH * index, index}
  );
}

希望它对你有用。

顺便放一下 this.list.scrollToIndex({index: 2})在 componentDidMount 中，由于某种原因对我不起作用，这就是我使用 onLayout 的原因相反