initialScrollIndex不适用于FlatList本地React

yacmzcpb  于 2023-01-09  发布在  React
关注(0)|答案(6)|浏览(151)

FlatList的initialScrollIndex出现问题-initialScrollIndex的参数被忽略,显示第一项。
https://snack.expo.io/Bk1mkK0zZ

qzlgjiam

qzlgjiam1#

我也遇到过同样的问题,这就是为什么我找到了你的问题。经过大量测试,我找到了一个变通方法,看起来很有效。在呈现列表后,我使用函数scrollToIndex,而不是使用initialScrollIndex。将它应用到代码中,它看起来像

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代替

4szc88ey

4szc88ey2#

使用RN 0.61.5
我已经通过设置解决了这个问题:

  • onContentSizeChange,它将在平面列表数据发生更改并呈现所有项时处理滚动到索引(如果需要,您可以使用设置initialNumToRender处理初始呈现时将呈现的项的数量)
  • 使用scrollToIndex函数时必须使用的onScrollToIndexFailed
<FlatList
    ref={ref => (this.flatList = ref)}
    data={dataArray}
    style={style}
    eyExtractor={(item, index) => String(index)}
    onContentSizeChange={() => {
        if (this.flatList && this.flatList.scrollToIndex && dataArray && dataArray.length) {
            this.flatList.scrollToIndex({  index: dataArray.length - 1 });
        }
    }}
    onScrollToIndexFailed={() => {}}
    renderItem={({ item, index }) => {
        return (
            <Text>Stackoverflow Answer</Text>
        );
    }}
/>
vmdwslir

vmdwslir3#

我用了getItemLayout,一切都很顺利

const getItemLayout=(data, index)=> {
    return { length: wp(100), offset:  wp(100)* index, index };
}

<FlatList
        horizontal
        pagingEnabled
        initialScrollIndex={1}
        snapToAlignment={"start"}
        decelerationRate={"fast"}
        showsHorizontalScrollIndicator={false}
        data={routes}
        getItemLayout={getItemLayout}
        renderItem={rowItem}/>
ep6jt1vc

ep6jt1vc4#

我遇到了同样的问题,但我的情况有点不同。在我的例子中,我从0WIDTH开始,等待onLayout事件回调来设置正确的宽度。因此,在初始渲染时,initialScrollIndex是什么值并不重要,宽度为零时无法滚动。使用Dimensions设置初始宽度为我修复了它。

62o28rlo

62o28rlo5#

只需删除以下内容:

pagingEnabled = { true }

这将修正您的示例。

tzdcorbm

tzdcorbm6#

只使用字符串

initialScrollIndex='8'

成功了!
:)

相关问题