在 flatlist 項目中播放本機視頻卡住了 UI 並崩潰了一段時間

Question

我有圖像和視頻文件，在本機使用的平面列表中，根據使用的文件類型，圖像視圖或反應本機視頻，現在多個視頻在第一次渲染平面列表時開始播放，應用程序用戶界面非常卡住，然后是應用程序有時會崩潰..請幫助做什么以及如何最小化它...不要找到發生這種情況的任何原因...

Answer 1

我想，這就是設備渲染的大部分內容。 您應該只播放屏幕上當前可見的視頻。

這可能會給你一個想法或幾乎一個完整的解決方案：

您可以使用 FlatList 的onViewableItemsChanged道具來完成。 我不知道如何處理 react-native-video，到目前為止還沒有使用過它。 但是您必須首先使用下面的第一個代碼檢測可見項目，然后像第二個代碼部分一樣播放視頻元素。 我將 isPlaying 添加為 state 變量，並將其鏈接到 Video 元素中作為設置視頻播放的道具。 我不知道 react-native-video 中的屬性是否稱為isPlaying ，但肯定有一個屬性可以設置視頻是暫停還是播放，只需找到它並相應地重命名 isPlaying 屬性即可使其工作。

此代碼會將屏幕上可見的所有 FlatList 項目放入 Viewable[] 數組：

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

如果視頻元素在屏幕上可見，這一個將“觀察” Viewable 數組並進行所需的更改。

export default function VideoPlayer({ viewable, _id, source }) {
  const video = React.useRef(null);
  const [isPlaying, setPlaying] = React.useState(false);
  React.useEffect(() => {
    if (viewable) {
      if (viewable.length) {
        if (viewable[0]._id === _id) {
          setPlaying(true);
        } else {
          setPlaying(false);
        }
      } else {
        setPlaying(false);
      }
    } else {
      setPlaying(false);
    }
  }, [viewable]);

  return (
    <View>
      <Video isPlaying={isPlaying}/>
    </View>
  );
}