React-Native学习系列(二) Image和ScrollView
接下来,我们接着(一)继续讲,今天我们学习的是Image组件和ScrollView组件。
Image组件
Image:一个用于显示多种不同类型图片的React组件。那么要如何使用呢?
引入本地图片:
<Image source={require('../images/myHeader.png')}/>
引入网络图片
<Image style={styles.imageStyle} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
这里要说的是加载网络图片的话,必须指定图片大小,例如logo_og.png,否则会遇到无法显示的问题,而引入本地图片的话,如果不指定图片的大小,那么默认的是图片的原大小,例如myHeader这张图片,大小为250 * 250,默认显示的是250 * 250.
安卓和iOS的图片尺寸不一样,那么给图片命名为my-icon.android.png/my-icon.ios.png,系统会自动判断系统来加载图片.
那么现在咱们来说一下Image的属性
width:320,
height:100,
//cover:保持图片宽高放大显示图片,保证把Image填满,显示放大图片的中心
//contain: 在保持图片宽高比的前提下缩放图片,完整显示图片,未填充的区域保留
//stretch:拉伸图片,不维持宽高比,填满Image设置的大小。
//repeat:类似于平铺效果
resizeMode: 'cover',
backgroundColor:'gray',
// tintColor: 'red',为所有非透明的像素指定一个颜色
// borderBottomLeftRadius ReactPropTypes.number
// borderBottomRightRadius ReactPropTypes.number
// borderColor color
// borderRadius number
// borderTopLeftRadius ReactPropTypes.number
// borderTopRightRadius ReactPropTypes.number
borderWidth: 2,//设置边框粗细程度
borderColor: 'black',//设置边框颜色
borderRadius: 30,//设置圆角大小,上面几个属性表示不同位置的圆角
opacity: 0.5,//设置透明程度,1为完全不透明
overflow: 'visible',//‘visible’,'hidden'当图片原始尺寸大于Image尺寸时,多余的部分是否可见
ScrollView组件
ScrollView必须有一个确定的高度才能正常使用,它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器,而这个容器就是ScrollView。
contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
现在咱们来看一下它的常用属性和方法
<ScrollView style={styles.scrollV}
contentContainerStyle={styles.contentContainer}
horizontal={true}
keyboardDismissMode='none'
keyboardShouldPersistTaps={false}
onScroll={this._scroller}
>
<Text>就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样就是这样</Text>
</ScrollView>
上面的这个是横向滚动的
horizontal:布尔值类型,当此属性为true的时候,所有的的子视图会在水平方向上排成一行,默认为false.
keyboardDismissMode:用户拖拽滚动视图的时候,是否要隐藏软键盘,默认为不隐藏'none', "interactive", 'on-drag'
keyboardShouldPersistTaps:当此属性为false的时候,在软键盘激活之后,点击焦点文本输入框以外的地方,键盘就会隐藏。
如果为true,滚动视图不会响应点击.
onContentSizeChange function 该当滚动视图的内容尺寸大小发生变化的时候进行调用。
onScroll function 该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。
_scroller(){
console.log("横向滚动");
}
refreshControl element 设置元素控件,该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.这个咱们以后讲。
showsHorizontalScrollIndicator:bool值是否显示一个水平方向的滚动条
showsVerticalScrollIndicator :bool值是否显示一个竖直方向的滚动条
以上是一些基础的属性,进阶的咱们后面再讲。
下面是一些常用属性
scroller: {
flex:1,
margin:20,
width: 300,
backgroundColor :'white',
borderWidth:2,
borderColor:'black',
},
contentContainer: {
shadowColor: 'red',//设置阴影颜色
shadowOffset: {width:10,height:5},//设置阴影面积
shadowOpacity: 1,//设置阴影的透明度
shadowRadius: 20,//设置阴影的圆角
},
下周咱们接着说另外的控件。
欢迎关注我的github
另外,本系列所有的源码都放在了我的github上:https://github.com/Demon404/Honey
React-Native学习系列(二) Image和ScrollView的更多相关文章
- React Native学习(二)—— 开始一个项目
本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...
- React Native学习(二)之View
React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- .net reactor 学习系列(二)---.net reactor界面各功能说明
原文:.net reactor 学习系列(二)---.net reactor界面各功能说明 安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.c ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- MyBatis学习系列二——增删改查
目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
随机推荐
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
- C#多线程之线程池篇1
在C#多线程之线程池篇中,我们将学习多线程访问共享资源的一些通用的技术,我们将学习到以下知识点: 在线程池中调用委托 在线程池中执行异步操作 线程池和并行度 实现取消选项 使用等待句柄和超时 使用计时 ...
- [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性
回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...
- Android带加减的edittext
看了网上这样自带加减的edittext写得好复杂,还有各种监听事件,我觉得没有必有.于是我自己写了一个. 我这个edittext仅仅限制整数,每次加减1. public class TestEditT ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- Java程序员:工作还是游戏,是该好好衡量一下了
前阵子我终于下定决心,删掉了硬盘里所有的游戏. 身为一个程序猿,每天都要和各种新技术打交道,闲暇时间,总还得看一下各大论坛,逛逛博客园啥的,给自己充充电.游戏的话,其实我自小就比较喜欢,可以算是一种兴 ...
- BPM始终服务于人,落脚于人
数字经济时代下,云计算.大数据.移动互联已经成为当下企业必须采取的武装力量.随着互联网+.中国制造2025.工业4.0等国家战略的引导与支持,无数的企业在这场数字化浪潮中使尽浑身解数,想要抓住机遇奋力 ...
- 简述我的SOA服务治理
SOA服务治理 1.解决业务部门服务冲突和纠纷2.版本定义与版本管理3.服务备案与服务管理4.业务监督与服务监控 SOA的战略目的 一.业务价值胜过技术策略 二.战略目标胜过具体项目的效益 三.内置的 ...
- mysql 写入优化
1 主从分离 从表读取,主表可以去掉索引 2 先写入到文件或redis,定时刷新到库 3 用nginx 4 分库 分表 每个库表的数据总量少了 插入会快一点 5 最大限度减少查库的次数 6 一条sql ...
- 学习笔记:发现一个IE版本判断的好方法
web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题.在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法. 常规js方法 找到一个方法,还不错,可以识别出各 ...