Как я могу воспроизводить видео в формате native-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

Я думаю, что есть свойство окна, которое сообщает вам текущую высоту. Просто используйте этот номер в событии прокрутки