加载中…
个人资料
暗夜巡视
暗夜巡视
  • 博客等级:
  • 博客积分:0
  • 博客访问:13,814
  • 关注人气:32
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

#React Native#105布局与组件<2>Image与可触摸组件

(2017-11-08 17:06:46)
分类: 计算机相关
3.Image组件
3.1图片加载模式
PNG图片可以设置透明度,但是JPG图片打开速度优于PNG。
网络图片:
如果是动态图则需要引入 com.facebook.fresco 在Android的平台上,   compile 'com.facebook.fresco:animated-gif:0.13.0' 在build.gradle 中的compile。
静态图片:
const base64Icon ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';//base64的图片资源
base64图片:
3.2 图片展示样式
resizeMode: 
cover:让image 填充容器定义的区域,可以放大缩小,他会按照给定的宽高放置,直至两个维度最小的完全填充,多出的部分会不显示。此模式是图片默认的模式。
contain: 等比例缩放,会在某个维度上有留白。
stretch:不考虑宽高比的填充。
3.3图片事件
onLoadStart:图片开始加载。
onLoadEnd:图片加载结束。
onLoad: 图片家在正确才会调用。
4.可触摸组件
这正是RN 替代web app 的好处,会有原生的视觉变化效果。可触摸组件不是单独的组件,需要与其他组件协同工作,可已经其他组件定义为可触摸组件的子组件来实现可触摸组件的效果。
TouchableNativeFeedback: android 特有组件,一般无特殊要求不用他。
TouchableWithoutFeedback: 触摸时无视觉效果,但是RN可以处理该事件,一般也不用。
TouchableOpacity:  比较通用的视觉效果处理组件。定义onPress方法
TouchableHighlight:高亮效果的视觉处理组件。有三个回调函数处理高亮变化。



0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有