如何获取本地视频列表并在React Native中以网格格式显示它们？

import React, { useEffect, useState } from 'react';
import { View, FlatList, Image, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const itemWidth = width / 3;

const VideoGrid = () => {
  const [videoList, setVideoList] = useState([]);

  useEffect(() => {
    // 获取本地视频列表
    const getVideoList = async () => {
      try {
        const dirPath = '/sdcard/DCIM/'; // 本地视频存储目录
        const files = await RNFS.readdir(dirPath);
        const videoFiles = files.filter(file => file.endsWith('.mp4')); // 过滤视频文件

        setVideoList(videoFiles);
      } catch (error) {
        console.log(error);
      }
    };

    getVideoList();
  }, []);

  const renderVideoItem = ({ item }) => (
    <View style={{ width: itemWidth, height: itemWidth }}>
      <Image
        source={{ uri: item }}
        style={{ flex: 1, resizeMode: 'cover' }}
      />
    </View>
  );

  return (
    <FlatList
      data={videoList}
      keyExtractor={(item, index) => index.toString()}
      renderItem={renderVideoItem}
      numColumns={3} // 每行显示3个视频
    />
  );
};

export default VideoGrid;