web-dev-qa-db-ja.com

ビューの外にあるときにビデオをフラットリストで一時停止

ビデオを表示するフラットリストがあります。ビデオがビューの外に出たときは一時停止する必要があります。各Postsコンポーネントで一時停止状態を維持しています。

class Posts extends React.PureComponent {

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

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

}

使ってます react-native-video。

onViewableItemsChangedのFlatlist propを使用してみましたが、状態は変わりません。

試しました this 。しかし、それは私にはうまくいかないようです。

どうすればいいですか？

react-nativereact-native-flatlistreact-native-video
6
Mayank Raj

これは、videoを含むカードコンポーネント内のトリックを簡単に実行した方法です

<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 });
    }
};

これが役に立ったら教えてください

2
Fadi Abo Msalam

私はついにこれを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に設定しています。

0
Mayank Raj