在React Native中,要显示Base64图片,可以使用Image
组件和source
属性。然而,有时候直接将Base64字符串赋值给source
属性可能无法正常显示图片。以下是一种解决方法:
rn-fetch-blob
库来实现此功能。确保你已经安装了该库,可以使用以下命令安装:npm install rn-fetch-blob --save
rn-fetch-blob
库,并使用fs.writeFile
方法将Base64字符串写入临时文件:import RNFetchBlob from 'rn-fetch-blob';
// ...
const saveImageToDisk = async (base64String, imageName) => {
const fs = RNFetchBlob.fs;
let imagePath = null;
try {
const base64Data = base64String.replace('data:image/jpeg;base64,', '');
imagePath = `${fs.dirs.CacheDir}/${imageName}.jpg`;
await fs.writeFile(imagePath, base64Data, 'base64');
} catch (error) {
console.error(error);
}
return imagePath;
};
saveImageToDisk
方法并使用返回的图片路径作为source
属性的值:import { Image } from 'react-native';
// ...
const YourComponent = () => {
const base64Image = 'your_base64_image_string';
const imageName = 'your_image_name';
const displayImage = async () => {
const imagePath = await saveImageToDisk(base64Image, imageName);
return `file://${imagePath}`;
};
return (
);
};
export default YourComponent;
通过这种方式,Base64图片将会被保存到设备的临时目录中,并将临时文件路径作为source
属性的值传递给Image
组件,从而正确显示Base64图片。