javascript - 如何在 React Native 中循环浏览文件夹(和带有图像的子文件夹)？

Question

我正在尝试列出图像集。我在 ./assets

中有多个文件夹

./assets
├── 1x3
│   ├── 1.jpg
│   ├── 2.jpg
│   └── 3.jpg 
└── 3x3
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    └── 9.jpg

我更愿意遍历 ./assets 获取子文件夹，并遍历每个子文件夹获取图像。我曾尝试在网上寻找解决方案，但它们似乎不起作用。

我试过:

import React, { FC, ReactElement, useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";

interface GalleryProps {
    handle: string;
}

const importAll = (r) => {
    return r.keys().map(r);
}

const Gallery: FC<GalleryProps> = (props: GalleryProps): ReactElement => {
    const [listOfImages, setListOfImages] = useState<any>([])
    useEffect(() => {
        setListOfImages(importAll(require.context('../assets/1x3', false, /\.(png|jpe?g|svg)$/)));
    }, [])

    return (
        <View style={styles.wrapper}>
            <View>
                {
                    listOfImages.map(
                        (image, index) => <img key={index} src={image} ></img>
                    )
                }
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: "lavenderblush",
        alignItems: "center",
        justifyContent: "center",
    },
});

export default Gallery;

但我收到此错误:_$$_REQUIRE.context 不是函数。 (在 '_$$_REQUIRE.context('../assets/1x3', false,/\.(png|jpe?g|svg)$/','_$$_REQUIRE.context' 未定义

理想情况下，我希望实现类似(伪代码)的东西:

const Parent() {
    return (
        for (subfolders in folder) { // or folders.map(subfolder => ...)
            return <Child props={subfolder}>
        }
    )
}

和

const Child(props) {
    return (
        for (images in props.subfolder) { // or props.subfolder.map(image => ...)
            return <img src="image" />
        )
    )
}

我也尝试过 react-native-fs(但显然这是针对设备的文件夹)。感谢您的帮助。

Answer 1

react-native 打包器在构建时打包所有资源，例如图像。因此，不可能遍历文件夹并包含所有资源。 Image 组件的文档中提到了这一点。

https://reactnative.dev/docs/images

In order for this to work, the image name in require has to be known statically.

因此，您需要明确包含所有图像。