React-Native入门——图片加载

一、RN本地项目图片访问
        1.1、通过source——require访问
         <View>
                <Image
                    source={require('./images/img_login_logo.png')}
                />
             </View>
           1.1.1、 Image的缩放模式resizeMode    
                     cover: 保持图片宽高比缩放直到图片宽和高都等于或者大于容器宽高,默认属性   
                     contain: 保持图片宽高比缩放直到图片宽高小于或等于容器宽高   
                     stretch: 拉伸,不保持图片宽高比拉伸,直到图片铺满容器宽高
                     repeat: 维持图片宽高比平铺图片(只在ios平台可用)
                     center: 图片居中但是不拉伸 
         1.2、加载网络图片
                     使用例子:
                        <Image
                   style={{width:50,height:50,borderWidth:1}}
                   source={{uri:'https://avatar.csdn.net/7/4/C/1_u013519084.jpg?1541993124'}}
                />
                显示网络图片需要指定宽和高,否者不能显示出来
          1.3、 显示andorid/ios原生图片,分别在andorid项目建立drawable文件夹放入图片,在Ios项目图片文件夹下放入同名图片 
                 source={{uri:'ic_bike'}}      
                 原生项目的图片和网路图片加载需要指定大小才可显示,style里使用tintColor可以图片资源着上新的颜色
          1.4、 使用本地文件系统资源
                 指定uri路径,andorid路径使用f"ile:///"+路径,注意android 7.0手机文件权限问题

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值