reactjs - 仅当用户看到完整的视频组件时，如何以 react-native 播放视频？

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

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