Image组件

export default class App extends Component{
    render(){
        return(
          <View style={styles.container}>
             <Text>
                 加载项目中的图片
             </Text>
             <Image  source={require('./img/oldDoctor.png')} style={styles.imageStyle} ></Image>

             <Text>
                  加载App中的图片
             </Text>

              <Image source={{uri:'icon'}} style={styles.imageStyle}></Image>
             <Text>
                  加载网络上的图片
             </Text>
              <Image source={{uri: 'http://e.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9a62a929b1ddfa9ec8b13cd75.jpg'}} style={styles.imageStyle}></Image>
          </View>
        );
    }
}
const styles = StyleSheet.create({
   container: {
       flex:1,
       backgroundColor:'#F5FCFF',
       justifyContent:'center',
       alignItems:'center'
   },
    imageStyle:{
        width:80,
        height:80,
        resizeMode:'contain',
    }
});

resizeMode有四个值,默认是center,cover(适应性充满,有部分视图显示不出来),contain(可能会有Image组件的底色),stretch(使图片拉伸充满整个组件)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值