前言

今天来聊聊react native的Image组件，这里面有一个defaultSource属性

图片.png

如图所示，它的作用就是：在加载网络时，在图片未完全加载出来之前，用你指定的图片暂时代替这个Image。

问题就在于，Android并不生效(虽然写着release版本会生效，但是貌似不管用)

因此在这里给大家分享一个适配安卓的方法——改透明度

开始

思路就是将两张图片用绝对定位叠在一起，一张是加载中、一张是加载完成，然后使用Image中的onLoad、onLoadStart、onLoadEnd来设置加载中这张图片的透明度

代码示例

ImageAndroid.js

import React from 'react';
import { StyleSheet,View,Image } from 'react-native';



export default class ImageAndroid extends React.Component {
  constructor(props){
    super(props)
    this.state={
        opacity:1
    }
  }
  
  componentWillMount() {
    
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Image 
          source={this.props.img}
          resizeMode='cover'
          style={[this.props.style,{position:'absolute'}]}
          onLoadStart={()=>this.setState({ opacity:1 })}
          onLoad={()=>this.setState({ opacity:0 })}
        />
        <Image 
          source={this.props.loadingImg}
          resizeMode='cover'
          style={{opacity:this.state.opacity}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1
  }
});

调用ImageAndroid组件的js文件：

{
                Platform.OS=='ios'?
                <Image 
                  source={{uri:this.props.img}}
                  defaultSource={require('../../assets/placeholder.png')}
                  resizeMode='cover'
                />
                :
                <ImageAndroid
                  img={{uri:this.props.img}}
                  loadingImg={require('../../assets/placeholder.png')}
                />
                
}

结语

本文只是本人学习的笔记本，如果有幸能为各位带来灵感，那是我的荣幸，最后祝大家新年快乐