React Native - 数组的 useRef (Expo)

Question

Been using Expo and RN on an app, but I'm stuck with a problem. I'm using Expo Video to make a photo/video gallery. The problem is, if I have more than 1 video in the array, only the last one will play (problem with useRef). And I couldn't find a way to create a ref for each one of them.

Solutions that I've tried and half worked: I created a VideoComponent (as a function then added on return), and each component had its own useRef and useState for playing inside the component a different useRef/useState for video/status for each. It worked okay-ish. But the problem was when other states changed (user presses like, for example). Whenever a state changes, and rerenders, the whole video reset to the beginning. Which is not ok. The video reset on state change of other components doesn't affect the video if doing it normally (one useRef/state) but as I said, It's only playing the last component, which is not okay.

import React, { useRef, useState } from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

function App(props) {
  const [allData, setAllData] = useState([
    {
      medias: [
        { link: 'https://link.com/link1.avi', mediaExtension: 'avi' },
        { link: 'https://link.com/link2.jpg', mediaExtension: 'jpg' },
        { link: 'https://link.com/link3.mov', mediaExtension: 'mov' },
      ],
      name: 'Name',
      description: 'description',
    },
  ]);
  const video = useRef(null);
  const [status, setStatus] = useState({});

  return (
    <View style={{}}>
      <FlatList
        horizontal
        data={allData}
        renderItem={({ item }) => (
          <View style={{}}>
            {item.medias.map((item) => (
              <View>
                {item.mediaExtension === 'mov' || 'avi' || 'WebM' ? (
                  <View style={{ flex: 1 }}>
                    <TouchableOpacity
                      onPress={() =>
                        video.isPlaying
                          ? video.current.pauseAsync()
                          : video.current.playAsync()
                      }>
                      <Video
                        ref={video}
                        style={{ alignSelf: 'center' }}
                        source={{
                          uri: item.link,
                        }}
                        onPlaybackStatusUpdate={(status) =>
                          setStatus(() => status)
                        }
                      />
                    </TouchableOpacity>
                  </View>
                ) : (
                  <Image style={{}} source={{ uri: item.link }} />
                )}
              </View>
            ))}
          </View>
        )}
      />
    </View>
  );
}

export default App;

Answer 1

As far as I understand, you want to create a FlatList of Videos, and onScroll you want to pause it. This can be implemented as shown below

Also, here is a Working Example for this

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

const Videos = [
  {
    _id: 1,
    source: require('./assets/videoplayback.mp4'),
  },
  {
    _id: 2,
    source: require('./assets/videoplayback.mp4'),
  },
  {
    _id: 3,
    source: require('./assets/videoplayback.mp4'),
  },
  {
    _id: 4,
    source: require('./assets/videoplayback.mp4'),
  },
  {
    _id: 5,
    source: require('./assets/videoplayback.mp4'),
  },
  {
    _id: 6,
    source: require('./assets/videoplayback.mp4'),
  },
];

export default function App() {
  const [Viewable, SetViewable] = React.useState([]);
  const ref = React.useRef(null);

  const onViewRef = React.useRef((viewableItems) => {
    let Check = [];
    for (var i = 0; i < viewableItems.viewableItems.length; i++) {
      Check.push(viewableItems.viewableItems[i].item);
    }
    SetViewable(Check);
  });

  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 80 });

  return (
    <View style={styles.container}>
      <FlatList
        data={Videos}
        keyExtractor={(item) => item._id.toString()}
        renderItem={({ item }) => <VideoPlayer {...item} viewable={Viewable} />}
        ref={ref}
        onViewableItemsChanged={onViewRef.current}
        viewabilityConfig={viewConfigRef.current}
      />
    </View>
  );
}

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

and VideoPLayer component looks like this

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Video, AVPlaybackStatus } from 'expo-av';

export default function VideoPlayer({ viewable, _id, source }) {
  const video = React.useRef(null);

  React.useEffect(() => {
    if (viewable) {
      if (viewable.length) {
        if (viewable[0]._id === _id) {
          video.current.playAsync();
        } else {
          video.current.pauseAsync();
        }
      } else {
        video.current.pauseAsync();
      }
    } else {
      video.current.pauseAsync();
    }
  }, [viewable]);

  return (
    <View style={styles.container}>
      <Video
        ref={video}
        source={source}
        rate={1.0}
        volume={1.0}
        resizeMode={'contain'}
        isLooping
        shouldPlay
        style={styles.video}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('window').width,
    marginBottom: 100,
    marginTop: 100,
  },
  video: {
    width: Dimensions.get('window').width,
    height: 300,
  },
});