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

Question

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

确切地说，就像 Instagram 当您 暂停滚动 它 开始播放 视频自动。

基于 Android 中的 Android Documentation and this from this question 我们可以使用：

ListView.getFirstVisiblePosition()
ListView.getLastVisiblePosition()

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

<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>
        );
    }

详情请参考URL：https://facebook.github.io/react-native/docs/flatlist.html

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

How to determine a component active in view port of device?

listview

react-native

scrollview

screen

native-base