React-Native中Image请求网络图片时占位图的设置

http://www.jianshu.com/p/b045b843aa48

其实做开发的这段时间,一直在学习研究,总结了很多东西,但是没写过文章,最近刚开始接触React-Native,在关于网络图片的占位图设置时遇到了点麻烦,也没搜到个结果,就自己捣腾了,有以下可行办法。

首先说一下原理,我发现Image组件上在渲染绘制图像时,如果当前Image上已经有一张绘制好的图像了,在重新加载另一张新图像时,如果新图像还没有完全加载绘制好,还是会先显示之前的图像。那么,事情就变得简单了

情况一:需要显示的图片的URL链接需要先从网络获取,然后再加载到Image组件中:



情况一(1)

这种情况很简单,只需要一个三目运算就可以了,看起来比较清晰。当然,你可以直接在初始化state的时候把图片的url设置成占位图,然后source的uri直接适用state中的url就可以了 ,看起来更简单。如下:



情况一(1)

情况二:需要显示的图片的URL链接已经确定知道或者是通过props中传递的:

这种情况下我们是确定知道图片的URL的 没有从网络中获取的步骤,也就是上面那个例子中一开始的state中的imageURL是已知的。这个时候就不能像上面那么写了。



情况二

原理就是我上面说的那样,读者可以自己看情况。第一次写文章,一直不愿意写是因为太耗时间了(毕竟忙着混饭吃),特别是复杂的东西。这篇文章没有什么技术含量,但是希望能对一些人有点帮助,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native ImagePicker 组件获取到的图片是以 URI 的形式返回的,而不是公共路径。如果您需要将图片保存到公共路径,可以使用 `react-native-fs` 这个第三方库,用于读取和写入文件系统。 以下是一个简单的示例,演示如何将 ImagePicker 返回的图片保存到公共路径: ```javascript import React, { useState } from 'react'; import { Button, Image, View } from 'react-native'; import ImagePicker from 'react-native-image-picker'; import RNFS from 'react-native-fs'; const App = () => { const [image, setImage] = useState(null); const handleChoosePhoto = () => { const options = { mediaType: 'photo', quality: 1, }; ImagePicker.launchImageLibrary(options, response => { if (response.uri) { const folderPath = RNFS.DownloadDirectoryPath; const fileName = 'myImage.jpg'; const filePath = `${folderPath}/${fileName}`; RNFS.copyFile(response.uri, filePath).then(() => { setImage(filePath); }); } }); }; return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> {image && ( <Image source={{ uri: `file://${image}` }} style={{ width: 200, height: 200 }} /> )} <Button title="Choose Photo" onPress={handleChoosePhoto} /> </View> ); }; export default App; ``` 在上面的示例,我们使用 `react-native-fs` 的 `copyFile` 方法将 ImagePicker 返回的图片复制到公共路径,并将公共路径作为 state 更新。最后,我们使用 `file://` 协议将图片加载到 Image 组件。 希望这能帮到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值