`App.js`

Question

我有一个展示视频的清单。我希望当视频离开视图时，应该将其暂停。我正在每个Posts组件中保持暂停状态。

class Posts extends React.PureComponent {

constructor() {
 super()
 this.state = {
   pause: true,
 }

 return(){
  <Video
    pause={this.state.pause}
    //other props
  />
 }

}

我正在使用react-native-video。

我尝试使用onViewableItemsChanged的{{1}}道具，但不会改变状态。

我尝试了this。但这似乎对我不起作用。

我应该如何进行？

Answer 1

这是使用react-native-inviewport的可能解决方案。此依存关系只是一个索引文件，其中包含当视图在视口中时具有回调的组件。可以轻松修改它以满足您的需求。

我构建了一个具有FlatList的非常简单的应用程序。 FlatList中的第11项是视频。这意味着当应用程序渲染时，视频不在屏幕上，因此不会播放viddeo，一旦视频完全进入视口，它便应开始播放。

`App.js`

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';
import VideoPlayer from './VideoPlayer';

export default class App extends React.Component {

  state = {
    data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
  }

  renderItem = ({item, index}) => {
    if (index === 10) {
      return <VideoPlayer />
    } else {
      return (
        <View style={{height: 100, backgroundColor: '#336699', justifyContent: 'center', alignItems: 'center'}}>
          <Text>{index}</Text>
        </View>
      )
    }
  }
  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

`VideoPlayer.js`

这是一个包含Video组件的组件。视频包装在具有回调功能的InViewPort组件中。当其包围的组件在视口中完全时，回调返回true；在视口中不完全包围时，则返回false。回调会调用this.handlePlaying，然后根据布尔值依次调用this.playVideo或this.pauseVideo。

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Video } from 'expo';
import InViewPort from './InViewPort';
//import InViewPort from 'react-native-inviewport; // this wouldn't work in the snack so I just copied the file and added it manually.

export default class VideoPlayer extends React.Component {

  pauseVideo = () => {
    if(this.video) {
      this.video.pauseAsync();
    }
  }

  playVideo = () => {
    if(this.video) {
      this.video.playAsync();
    }
  }

  handlePlaying = (isVisible) => {
    isVisible ? this.playVideo() : this.pauseVideo();
  }

  render() {
      return (
        <View style={styles.container}>
         <InViewPort onChange={this.handlePlaying}>
          <Video
            ref={ref => {this.video = ref}}
            source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            shouldPlay
            style={{ width: 300, height: 300 }}
          />
          </InViewPort>
        </View>
      )
  }  
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});

以下是显示它可以正常工作的小吃https://snack.expo.io/@andypandy/video-only-playing-when-in-viewport

我应该指出，如果视频在视口中不是完全，则它将无法播放。我确定可以对react-native-inviewport进行一些调整，以便如果您想要的话，它将在部分视口中播放视频，也许是通过将视频的高度传递到InViewPort组件。

Answer 2

这就是我简单的技巧在我的卡片组件内部具有视频

<Video ...
    paused={currentIndex !== currentVisibleIndex}
/>

currentIndex和currentVisibleIndex都从 FlatList 父级

传递了组件

我的FlatList通过 renderItem索引作为currentIndex

<FlatList
    data={[...]}
    renderItem={({ item, index }) => (
    <GalleryCard
        {...item}
        currentIndex={index}
        currentVisibleIndex={currentVisibleIndex}
        />
        )}
    onViewableItemsChanged={this.onViewableItemsChanged}
    viewabilityConfig={{
        viewAreaCoveragePercentThreshold: 90
    }}

最后，这就是如何计算 currentVisibleIndex 请确保阅读viewabilityConfig

onViewableItemsChanged = ({ viewableItems, changed }) => {
    if (viewableItems && viewableItems.length > 0) {
        this.setState({ currentVisibleIndex: viewableItems[0].index });
    }
};

请告诉我这是否有帮助

Answer 3

我终于使用redux做到了。不确定这是否正确。

Home.js

_renderItem = ({item, index}) => <Posts item={item} />

viewableItemsChanged = (props) => {
    let {changed} = props;
    let changedPostArray = []; 
    changed.map((v,i) => {
      let {isViewable, item} = v;
      if(!isViewable) {
        let {post_id, type} = item;
        if(type === 1)
          changedPostArray.push(post_id);
      }
    });
    if(changedPostArray.length != 0)
      this.props.sendPostToPause(changedPostArray);
  }

render() {
    return(
      <View style={{flex: 1}} >
          <FlatList
            ref={(ref) => this.homeList = ref}
            refreshing={this.state.refreshing}
            onRefresh={async () => {
              await this.setState({refreshing: true, postsId: [0], radiusId: 0, followingId: 0});
              this.getPosts();
            }}
            onEndReached={async () => {
              if(!this.state.isEnd) {
                await this.setState({isPaginate: true})
                this.getPosts()
              }
            }}
            onEndReachedThreshold={0.2}
            removeClippedSubviews={true}
            contentContainerStyle={{paddingBottom: 80}}
            data={this.state.followersRes}            
            renderItem={this._renderItem}
            viewabilityConfig={this.viewabilityConfig}
            onViewableItemsChanged={this.viewableItemsChanged}
          />
        </View>
        <Footer callback={this.scrollToTopAndRefresh} />
      </View>
    )
}
export default connect(null, {sendPostToPause})(Home);

Posts.js

class Posts extends React.PureComponent {

constructor(){
 super()
 this.state: {
  pause: false
 }
}

componentDidUpdate(prevProps) {
    if(prevProps != this.props) {
      this.props.postIdArray.map((v) => {
        if(v === prevProps.item.post_id) {
          this.setState({pause: true})
        }
      })
    }
  }

render(){
 return(
  <Video
    pause={this.state.pause}
    //Other props
  />
 )
}


}

const mapStateToProps = (state) => {
  const {postId} = state.reducers;
  return {
    postIdArray: postId
  }
}

export default connect(mapStateToProps, {sendPostToPause})(withNavigation(Posts));

无论何时触发viewableItemsChanged，我都会在数组中添加更改的帖子ID，并使用帖子ID数组调用操作。在Posts组件中，我正在检查帖子ID是否匹配，如果是，则将暂停状态设置为true。

视口暂停时，在平板列表中暂停视频

3 个答案:

`App.js`

`VideoPlayer.js`