当从ImagePicker中选择图像时，图像显示非常慢

Question

我没能弄清楚为什么在选择图像后需要1-3秒才能显示图片。图像数组将不超过4张。

我使用了useState和一个数组来保存所有的照片

// PHOTOS
const [photos, setPhotos] = useState([]);

组件加载时。我使用useEffect是为了检查我们是否有选择图像授予，如下所示。

useEffect(() => {
(async () => {
if (Platform.OS !== "web") {
const { status } =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
}
})();
}, []);

接下来，我们有一个按钮，将运行pickImage功能。这是负责获取被选中的图像，看看它是否为主，然后将它添加到照片数组。

const pickImage = async () => {
// Get the image from the phone
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsMultipleSelection: true,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
exif: true,
});
// Set the photo as primary as true or false
const photo = {
isPrimary: photos.length === 0 ? true : false,
url: result.uri,
};
// Update current primary
if (photo.isPrimary) {
setCurrentPrimary(photos.length);
}
// Add photo to the array
setPhotos([...photos, photo]);
};

最后，我们要确保我们可以看到这些正在添加的图像。我们使用FlatList。这是这样做的:

<FlatList
data={photos}
keyExtractor={(item) => item.url}
renderItem={({ item, index }) => {
return (
<View
key={index}
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text
style={{
alignContent: "center",
alignSelf: "center",
color: "white",
}}
>
{index + 1}
</Text>
<Image
source={{ uri: item.url }}
style={{
height: heightPercentageToDP(20),
width: widthPercentageToDP(40),
resizeMode: "contain",
}}
/>
<View
style={{
flexDirection: "row",
alignSelf: "center",
marginRight: 20,
justifyContent: "space-around",
}}
>
<View
style={{
color: item.isPrimary ? "red" : "blue",
}}
>
<Button
containerStyle={{
backgroundColor: item.isPrimary ? "red" : "",
}}
color={item.isPrimary ? "green" : ""}
title="Primary"
onPress={() => makePrimary(index)}
/>
</View>
<Button
color="red"
title="Remove"
onPress={() => removeImage(index)}
/>
</View>
</View>
);
}}
/>;

任何关于哪部分可能导致长延迟的建议都是非常感谢的。这也是为什么会发生的。从我的理解,一组4图片不应该导致长期滞后,应该近即时特别是当增加一个数组。

谢谢

Answer 1

我也面临同样的问题，我正在压缩图像的质量(压缩需要处理时间)。我正在传递propcompressImageQuality: 0.8然后我把它取下来，它就开始正常工作了。

我代码:

import DatePicker from 'react-native-date-picker';
...
const images = await ImagePicker.openPicker({
multiple: true,
maxFiles: 50,
minFiles: 1,
mediaType: 'photo',
compressImageQuality: 0.8, // remove this prop for multiple images
});

意见:如果你真的需要，请传递以下道具，因为它们需要处理时间，我认为你不应该在用户选择多个图像时给他这些选项。

allowsEditing: true, // editing will use mobile resources like cpu, ram, storage ( this will take time ) 
exif: true,