Listview 如何确定设备的查看端口中的活动组件？

我有React Native长列表视图（卡片列表）。
如何在列表视图中检测当前卡是否处于活动状态（在屏幕上可见）

确切地说，就像Instagram一样，当你暂停滚动时，它会自动播放视频

基于Android，我们可以使用：

ListView.getFirstVisiblePosition()
ListView.getLastVisiblePosition()

但在我看来，我找不到解决办法。 这是我的密码：

<List>
    <ListItem>
      <Card>
        <CardItem>
            <Left style={{marginLeft: 10, marginRight: 10}}>
                <Thumbnail
                    circular
                    source={{uri: speaker.image}}/>
                <Text>
                    {speaker.first_name} {speaker.last_name}
                </Text>
                <Left>
                    <Text note style={{paddingLeft: 5}}>
                        {speaker.company}
                    </Text>
                </Left>
            </Left>
        </CardItem>
      </Card>
   </listItem>
 </list>

{演讲者.名字}{演讲者.姓氏}
{演讲者公司}

您可以在此处使用

Flatlist

而不是

listview

，它提供了

onViewableItemsChanged

以获取当前可见项，请参见下面的代码：

constructor(props) {
        super(props);
        this.state = {
            arrData: [],
        }
        this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this)
        this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}
    }

    handleViewableItemsChanged(info) {
        console.log(info)
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.arrData}
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}

                    renderItem={({item}) =>
                        // Your display Items
                    }
                />
            </View>
        );
    }

构造函数（道具）{
超级（道具）；
此.state={
ARR数据：[]，
}
this.handlevelitemschanged=this.handlevelitemschanged.bind（this）
this.viewabilityConfig={viewAreaCoveragePercentThreshold:50}
}
handleViewableItemsChanged（信息）{
控制台日志（信息）
}
render（）{
返回(
//您的显示项目
}
/>
);
}

---

您可以参考URL了解更多详细信息：

谢谢，但在滚动或滚动停止后不会更新！我根据你的建议解决了这个问题，非常感谢。我的问题是：