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}

更多相关文章

随机推荐