Question

是否有一个提供的方法可以让我们在滚动时获取FlatList顶部项的索引？

Answer 1

您可以这种方式访问每一行的索引：

   <FlatList data={this.state.dataList}
     ...
     renderItem={({item, index}) => this.renderRow(item, index)}
     ...
     console.log("current index is " + index)

   />

这将为您提供顶行的索引。

Answer 2

没有办法直接获得它。

但如果您知道每个项目的布局，则可以通过scrollview偏移计算它。

在flatlist上实现onScroll，比如

<FlatList onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   // your cell height
     console.log("now index is " + index)
}}>

ps：如果包含

，请不要忘记减去标题布局

Answer 3

View有一个onLayout事件，您可以使用它来接收元素的x和y。这可能需要您传入prop中的函数，然后该函数将从您的平面列表中的每个视图接收更新。你正在试用什么？

Answer 4

这是获取平面列表项目索引的正确方法：

    <FlatList
        horizontal
        data={this.state.data}
        renderItem={({ item: rowData,index }) => {
        return (
        <Card

            containerStyle={{flex:1,marginBottom:30,backgroundColor:'rgba(255,255,255,0.7)',}}>



            <Text style={{ marginBottom: 10 ,fontSize:30}}>
                {'Comments:'}
            </Text>
            <Text  style={{width:290}}>
                {rowData.comment}
            </Text>
            <Text style={styles.text }>
                {'\nIndex:'+index}
            </Text>


        </Card>
        );
        }}
        keyExtractor={(item, index) => index}

    />

Answer 5

实际上，您必须使用道具onViewableItemsChanged并从回调返回的数据中获取列表中显示的第一个元素的索引。请记住，还要设置prop viewabilityConfig，以便组件可以确定您认为显示对象的位置。

import React from "react";
import SwiperFlatList from "react-native-swiper-flatlist";

export default class MyComponent extends React.Component { 
// INSIDE A COMPONENT
  constructor(props) {
    super(props);
    this.currentIndex = 0;
    this._updateIndex = this._updateIndex.bind(this);
    this.viewabilityConfig = {
      itemVisiblePercentThreshold: 50
    };
  }

  _updateIndex({ viewableItems }) {
  // getting the first element visible index
    this.currentIndex = viewableItems[0].index;
  }

  render() {
    return  // ...
      <SwiperFlatList
              loop={false}
              index={0}
              onViewableItemsChanged={this._updateIndex}
              viewabilityConfig={this.viewabilityConfig}
            >
             {data}
            </SwiperFlatList>;
            }
}

您可以使用FlatList代替swiper-flat-list。

Answer 6

为了获取FlatList项目的索引-将itemData分布在renderItem中。

 <FlatList
       data={someData}
       keyExtractor={(item, index) => index.toString()}
       renderItem={ ( {item, index} ) => // use {item, index} instead of itemData

        <MyComponent index={index} />    
  />

Answer 7

对于那些想要简单方法的人，react-native-swiper-flatlist提供了getCurrentIndex和OnIndexChange的方法来查找索引。

在原生反应中获得平顶表的最高指数的方法

7 个答案: