RN Image小记

使用方式

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} />