react-native – 对FlatList不起作用的initialScrollIndex反应原

发布时间：2020-12-15 20:30:22 所属栏目：百科来源：网络整理

导读：我遇到了FlatList的initialScrollIndex问题 – 只是忽略了initialScrollIndex的参数,并显示了第一个项目. https://snack.expo.io/Bk1mkK0zZ 解决方法我有完全相同的问题,这就是我找到你的问题的原因.经过大量测试后,我找到了一种解决方法,这似乎有效.我没有

我遇到了FlatList的initialScrollIndex问题 – 只是忽略了initialScrollIndex的参数,并显示了第一个项目.

https://snack.expo.io/Bk1mkK0zZ

解决方法

我有完全相同的问题,这就是我找到你的问题的原因.经过大量测试后,我找到了一种解决方法,这似乎有效.我没有使用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而不是

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!