在 React-Native FlatList 中播放和暂停视频或仅播放一个视频可见答案

【问题标题】：play and pause videos in React-Native FlatList or Play video only one Video visible在 React-Native FlatList 中播放和暂停视频或仅播放一个视频可见
【发布时间】：2020-01-02 06:28:04
【问题描述】：

您好，我正在使用带有 FlatList 的 React-Native 来制作像 TikTok 这样的视频库应用程序，当我在制作应用程序时，我遇到了视频播放和暂停选项的错误。当我打开应用程序时，所有视频都在后台一次播放，但我想播放唯一一个在屏幕或视点中可见的视频。所以一旦检查下面的代码并给我任何更好的建议..


import SegmentedControlTab from 'react-native-segmented-control-tab';
import Video from 'react-native-video';
import VideoPlayer from 'react-native-video-controls';

import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

import axios from 'axios';

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 开发这种类型的功能。如果你这样做了，请告诉我。

标签： javascript android react-native

【解决方案1】：

首先，const { duration, paused, overlay } = this.state 已声明，但您仍在使用 this.state 访问 JSX 中的状态。

您的 onViewableItemsChanged 函数不会改变状态或执行任何操作，只会将内容记录到控制台。

你要么遗漏了，要么没有写完 onLoad、onEnd、onProgress 等函数。所以，要确切地知道发生了什么是不可能的。如果您只是为了发布这个问题而忽略了这些函数，您是否更新了这些函数中的 paused 状态？

【讨论】：

感谢您的回复我对 React-native 了解不多，所以我无法理解您在说什么，我是新手，如果您有完整的代码建议，请告诉我。
我没有时间开始一个项目并帮助您完成它。但我建议观看一些视频或阅读有关如何使用 FlatList 和 SectionList 的教程。也阅读 React Native 文档。例如：this.onEnd 应该在您的组件中调用 onEnd 方法。奇怪的是this.state.paused 是假的，所以视频不应该播放。试试 react-native-video GitHub 问题线程。看看能不能找到什么。祝你好运。
感谢您的建议，播放视频不是问题，所有视频一次播放是主要问题，所以我正在尝试实现播放视频。感谢您的建议。

【解决方案2】：

import { Viewport } from '@skele/components'

使用此组件，它为我解决了，此组件可帮助您一次跟踪一个视频并仅播放屏幕上可见的视频

甚至，我是 React Native 的新手，因此这是最简单的解决方案

【讨论】：