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}} />
在我的 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}} />