标签: react-native-flatlist

我有一个水平的平面列表,其中每个项目是width:300 我想要做的是获取当前可见项目的索引.

<FlatList 
            onScroll={(e) => this.handleScroll(e)} 
            horizontal={true}
            data={this.state.data}
            renderItem...

试过这个:

handleScroll(event) {
    let index = Math.ceil(
      event.nativeEvent.contentOffset.x / 300
    );

这样的事情:

handleScroll(event) {
  let contentOffset = event.nativeEvent.contentOffset;
  let index = Math.floor(contentOffset.x / 300);

但没有什么是准确的我总是得到一个索引或一个索引下来.
我做错了什么以及如何在平面列表中获得正确的当前索引？

例如,我在列表中列出第8项,但我得到索引9或10.

我正在从 迁移FlatList到FlashList，我已将我的 expo sdk 从 升级到 ，45.0.0并且46.0.0在实施FlashListshopify/flashlist 文档中的 as 时，我收到以下警告

FlashList 的渲染大小不可用。高度或宽度太小 (<2px)。请确保列表的父视图具有有效的大小。FlashList 将与父级的大小相匹配。

它工作得很好FlatList，只是从 api 加载数据需要花费很多时间，，，这就是为什么我决定切换到FlashList. 有人知道如何解决这个问题吗？如有任何帮助，我们将不胜感激。这是我的代码

渲染项函数

    const renderItem = ({ item: product }) => {
    return (
      <Product
        category={product.bp_product_category}
        itemname={product.bp_product_name}
        price={product.bp_product_selling_price}
        mass={product.bp_product_mass}
        unitofmass={product.bp_product_unit_of_mass}
        productID={product._id}
      />
    );
    };


      const keyExtractor = useCallback((item) => item._id, []);
      const filteredproducts = products.filter((product, i) =>
      product.bp_product_name.toLowerCase().includes(search.toLowerCase())
       );

FlashList 本身

    <View style={{flex:1, width:'100%', height:'100%'}} >
       <FlashList
          keyExtractor={keyExtractor}
          data={filteredproducts}
          renderItem={renderItem} …

我一直得到:

"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

非常混乱...,我传递的数组有一个在数组中的每个对象中定义的键属性.我在this.state中定义了该数组.我在控制台中快速打印出来以确定: 打印出阵列

数组中的每个对象定义为:

  var obj = {key: doc.id, value: doc.data()};

(doc和数据来自我的应用程序的另一部分,但我知道doc.id是唯一的)

经过一些谷歌搜索后,我尝试定义一个Key Extractor,如下所示:

_keyExtractor = (item, index) => item.key;

然后这是我的平面列表定义:

  <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

仍然收到相同的错误,此时不确定如何处理这个或它做错了什么.有任何想法吗？非常感谢!

我有一个看起来像这样的FlastList:

<FlatList
     pagingEnabled={true}
     horizontal={true}
     showsHorizontalScrollIndicator={false}
     data={[ {key:"A"}, {key:"B"} ]}
     renderItem={ ({item, index}) => <MyComponent /> }
 />

我有组件的宽度,所以一次只能在屏幕上显示一个页面.如何确定当前页面是什么(或者显示当前组件)？

我正在尝试使用RN0.43中的FlatList渲染3列中约250个图像的列表,并且我更改FlatList的onLayout函数中的图像宽度以适合屏幕的宽度.

初始性能还可以,但是在向上/向下滚动一些之后,有时需要一秒钟或2秒才能显示图像.

如果我改为屏幕方向则更糟糕,更新屏幕需要2~3秒.

一些发现:

1. 在屏幕旋转之后,直到调用FlatList.onLayout需要一秒或2秒

2. 在FlatList.onLayout和图像宽度更新之后,每个图像(大约一半的列表,~150个图像;虽然只显示~15个)渲染2~4次,而render()只调用一次.

题:

1. 如何修改代码以提高性能？
2. 在多列列表的getItemLayout()中,偏移量应该是(itemHeight + separatorHeight)*(index%numColumns)吗？

谢谢.

测试:GalaxySII(4.1.2)和Android SDK模拟器(7.1.1)

var data = [
    require('./res/img/Search.png'),
    require('./res/img/test - Copy.png'),
    // ~250 items
    ...];

class app extends React.Component {
    renderItem (info, width) {
        console.log('renderItem', info.index);
        if(width !== this.width) {
            this.imageStyle = {width: width-MarginHorizontal , height: width-MarginHorizontal, resizeMode: 'contain'};
        }
        return (
            <Image
                source = {info.item}
                key = {info.index}
                style={this.imageStyle}/>
            );
    }

    render() {
        console.log('Test.render');
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'flex-start',
                alignItems: 'center',
                backgroundColor: '#F5FCFF' …