Question

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

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

基于Android中Android Documentation和来自this的this question我们可以使用：

ListView.getFirstVisiblePosition() ListView.getLastVisiblePosition()

但是在React本地我找不到解决方案。这是我的代码：

<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>

Answer 1

您可以在此处使用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>
        );
    }

您可以参考网址了解详情：https://facebook.github.io/react-native/docs/flatlist.html

如何确定设备视口中的活动组件？

1 个答案: