React Native之Image组件使用时Android和iOS兼容性

在React Native中Image组件有两种写法：

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />

<Image source={require('./img/check.png')} />

如果你的代码中需要使用ajax网络请求出img的url地址，就需要使用uri的方法来写

<Image source={{uri: this.props.configData.imgUrlPath}}  style={styles.configDataImage} />

注：以上代码中使用了uri，而且style中写明了图片的宽高。

而对于这个图片地址请求不到的情况，Android和iOS处理的方式是不一样的：

Android：直接不显示不占位，但是ios会占位

iOS：不显示但是会占位

对此，我的兼容性处理办法如下：

在Image组件写出来之前保证在uri地址有效的情况下，才开始加载Image组件，否则不加载。

<View style={styles.headRight}>
     {
          isConfigData && this.props.configData.imgUrlPath ? <Image source={{uri: this.props.configData.imgUrlPath}} style={styles.configDataImage} /> :  <View style={styles.configDataImage}></View>
      }
<Text style={styles.headRightText}>注册</Text>
</View>

configDataImage: {
    width: 22,
    height: 22,
    marginRight: 5
}