Question

我正在构建一个启用了分页的简单水平React Native FlatList：

<FlatList
   horizontal={true}
   pagingEnabled={true}
   data={...some data...}
   renderItem={({item}) => {...some rendering...}}
   onViewableItemsChanged={(info) => {... handling ...}}
 />

我只想在列表中的新页面可见后才能回电。我要寻找的行为是，当用户左右滑动列表时，列表将翻页显示项目，并且我希望回调函数对可见的项目触发一次。

除非我一直跟踪可见项目的所属页面，否则onViewableItemsChanged道具将在可见项目的每次更改中被调用，这不是我想要的。

我正在寻找一种onViewablePageChanged类型的回调。

关于如何实现这一目标的任何想法？

Answer 1

我使用的解决方案是根据项目的整体列表来跟踪可见项目，以确定可见项目的“页数”。

使用<record id="sale_order_line_form_inherited" model="ir.ui.view"> <field name="name">sale_order.line.form.inherited</field> <field name="model">sale.order</field> <field name="inherit_id" ref="sale.view_order_form"/> <field name="arch" type="xml"> <xpath expr="//tree//field[@name='name']" position="after"> <field name="categorie"/>  <field name="item" domain="[]"/> <field name="items"/>    <field name="field2" widget="many2many_tags" options="{'no_create_edit': True}"/> </xpath> </field> </record>，列表将仅显示页面。但是，对可见项的每次更改都会调用pagingEnabled。通过比较可见项目和项目列表，可以弄清FlatList在哪个“页面”上。

这要求人们知道视图中可以显示多少个项目。可以根据布局进行计算，也可以在View和FlatList渲染中进行设置。

这是一个例子：

onViewableItemsChanged

看这小吃

https://snack.expo.io/@visto9259/flatlist-onviewableitemschanged-example

Answer 2

您可以使用以下代码获得可见的物品。试试这个。

//Method to invoke when item change
onViewableItemsChanged = ({ viewableItems, changed }) => {
      console.log("Visible items are", viewableItems);
      console.log("Changed in this iteration", changed);
   }

render () => {
    return (
    ...
    <FlatList
        horizontal={true}
        pagingEnabled={true}
        data={...some data...}
        renderItem={({item}) => {...some rendering...}}
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
     /> 
    ....
   )}

使用分页的FlatList，如何更改可见页面上的事件？

2 个答案: