仅在可见时反应本机播放视频，在看不见时暂停在平面列表中的视频

Question

我正在使用React-Native FlatList实现视频库应用程序，虽然使该应用程序在视频暂停和播放模式方面遇到问题，但我只想在视频完全可见时才播放视频，我尝试使用其他技术，但它们无法正常工作，请检查下面的代码。

export default class HomeScreen extends Component {
  _isMounted = false;
  constructor(Props) {
    super(Props);
    this.state = {
      error: null,
      isLoading: false,

      playing: false,
      currentTime: 10,
      duration: 0,
      isFullScreen: false,
      isLoading: true,
      paused: true,
      playerState: PLAYER_STATES.PLAYING,
      screenType: 'content',

    };

    this.viewabilityConfig = {
      waitForInteraction: true,
      viewAreaCoveragePercentThreshold: 95
    }


  }
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  }




 render() {
    const { duration, paused, overlay } = this.state

    return (
      <View style={styles.container}>        

         <FlatList style={styles.list}
                data={this.state.following_Posts}
                // keyExtractor={(item, index) => index.toString()}
                keyExtractor={(data_Posts, index) => {
                  return data_Posts.id.toString();
                }}
                ItemSeparatorComponent={() => { return (<View style={styles.separator} />) }}

               // viewabilityConfig={{ viewAreaCoveragePercentThreshold: 95 }}
              viewabilityConfig={this.viewabilityConfig}

              onViewableItemsChanged={this.onViewableItemsChanged}
              viewabilityConfig={{
                itemVisiblePercentThreshold: 95
              }}

                refreshing={this.state.isLoading}
                onRefresh={this.getFollowingPosts}
                renderItem={(posts, id) => {
                  const items = posts.item;
                  return (
                    <View style={styles.card}>                    

                      <View style={styles.cardContent}>
                        {items.file_Name.toString().endsWith("mp4") ?
                          <View>
                            <Video
                              onEnd={this.onEnd}
                              onLoad={this.onLoad}
                              onLoadStart={this.onLoadStart}
                              onProgress={this.onProgress}
                              paused={this.state.paused}
                              ref={videoPlayer => (this.videoPlayer = videoPlayer)}
                              onFullScreen={this.state.isFullScreen}
                              resizeMode="cover"
                              volume={10}
                              source={{ uri: "http://192.168.1.3:3200/" + items.file_Name }}
                              style={{ width: '100%', height: '100%', top: 0, left: 0, bottom: 0, right: 0, }}

                            />
                            <MediaControls
                              duration={this.state.duration}
                              isLoading={this.state.isLoading}
                              mainColor="#333"
                              onFullScreen={this.onFullScreen}
                              onPaused={this.onPaused}
                              onReplay={this.onReplay}
                              onSeek={this.onSeek}
                              onSeeking={this.onSeeking}
                              playerState={this.state.playerState}
                              progress={this.state.currentTime}
                              toolbar={this.renderToolbar()}
                            />
                          </View>
                       </View>
      />
   </View>
  )
 }

我还尝试了 FlatList viewabilityConfig

              viewabilityConfig={this.viewabilityConfig}

              onViewableItemsChanged={this.onViewableItemsChanged}
              viewabilityConfig={{
                itemVisiblePercentThreshold: 95
              }}

因此，如果有人知道解决方案租约告诉我