RN Image小记

499 阅读1分钟

使用方式

Rn 自带组件Image,我们是这样使用的

<Image source={{uri: data?.uri}} style={style} />

问题情况

在使用过程中,我们会遇到一些问题情况:

1.uri为一个错误地址或者链接的情况

2.uri为null或者undefined的时候

onError

当加载错误的时候调用此回调函数,参数为{nativeEvent:{error}}。

const [sources, setSources] = useState(source)
<Image onError={() => setSources(defaultImg)} source={sources} style={style} />

defaultSource

在读取图片时默认显示的图片。

注意:在 Android 的 debug 版本上本属性不会生效(但在 release 版本中会生效)

<Image defaultSource={defaultImg} source={sources} style={style} />

进阶问题

实际开发过程中发现了其他问题:

onError 只能拦住uri打不开的情况,

defaultSource ios能拦住uri为空的情况,android拦不住

因此做了以下调整:

const [sources, setSources] = useState(source)
<Image onError={() => setSources(defaultImg)} source={source?.uri?sources:defaultImg} style={style} />