「React Native」solve defaultSourc

作者: 七月流火_9405 | 来源:发表于2017-12-27 18:29 被阅读60次

问题描述

当请求网络图片时，当图片返回之前，就先加载下面的布局了，待图片返回来之后，再次渲染图片（图片的高度变化），就会将图片以下的布局顶开，出现“抖动”的现象。

解决方案

ios:

image提供了defaultSource用来作为占位图，但是只支持ios。这是ReactNative的问题，他们正在努力修复支持android。

android:

在image组件套一层和image一样宽高的view，防止图片下面的布局会因为图片高度变化而出现“抖动”的现象。

 <View style={{
    width: windowWidth / 2 - 40
    , height: windowWidth / 3
}}>
    <CachedImage
        source={{
            uri: this.props.item.mainPic + '_150x150'
        }}
        style={styles.itemImage}
        defaultSource={require('../img/medicine_discount/ic_good_placeholder.png')}
    />
</View>