仅当用户看到完整的视频组件时，我才如何在反应中播放视频

Question

我正在使用react-native-video-player在我的应用中播放视频。我有一个屏幕可以呈现子组件，在其中，在其中每个屏幕中，我都有一个视频播放器嵌入。我的问题是，只有在用户看到视频嵌入的整个组件时，我才如何进行视频播放？否则，一个人进入屏幕时会同时听到10个视频。

<FlatList
    data={this.state.data}
    style={{ marginTop: 10 }}
    renderItem={({ item }) => (
      <DiscoveryPanel
        {...item}
        componentId={this.props.componentId}
        connectionType={this.state.connectionType}
        followAction={() => this.followAction(item)}
      />
    )}
    keyExtractor={item => item.eid}
  />;

const DiscoveryPanel = ({ relevant }) => {
  return (
    <View style={styles.boxShadow}>
      <View style={styles.topContainer}>
        <VideoPlayer
          thumbnail={{ uri: logo }}
          video={{
            uri: stream_urls["480p30"]
              ? stream_urls["480p30"]
              : stream_urls["chunked"]
          }}
          muted={false}
          pauseOnPress={true}
          autoplay={connectionType == "wifi"}
        />
        <Image
          style={{ position: "absolute", height: 60, width: 60 }}
          source={require("../../../assets/images/record_gif.gif")}
        />
      </View>
    </View>
  );
};

Answer 1

我认为有一个窗口属性告诉您当前的高度。只需在滚动事件中使用此号码