React Native:How 以在从本地图库中选取时动态排列显示的本地图像?

React Native:How to dynamically arrange local images in display when picked from local gallery?

在我的 RN 0.62.2 应用程序中,一个函数用于显示从图库中选取的本地图像:

const displayImg = (img_source, width, ht, local=false) => {
        if (local) {
            return (<Image source={require(img_source)} style={{width:width, height:ht, resizeMode:'cover'}}/>); //<<<== require causes error with dynamic image source
        } else {  //online 
            return (<FastImage source={{uri:img_source}} resizeMode={FastImage.resizeMode.cover} style={{width:width, height:ht}}/>);
        };
        
    };

但是由于打包时图片源不可用,RN为require抛出error。上述函数的目的是根据选取的图像数量动态排列图像显示格式。例如,对于 1 张图像,则显示的图像将占满宽度。如果有 2 张图片,则一张图片将与另一张图片并排占一半宽度。由于在用户选择 miage 之前应用程序不知道要显示哪个图像,因此 require(image_source) 在捆绑时不知道确切的路径,这违反了 React Native 捆绑。我有办法解决这个问题吗?

您不必要求用户输入图像。

您应该将它们用作外部图像,因为 react-native-image-picker 将 return url 选取的图像。

所以不用

 <Image source={require(img_source)} />

你应该:

<Image source={{uri: img_source}} />