RN中的常用组件-----图片
1.RN中的常用组件-----图片
本地图片: <Image source={require('../src/assets/x.jpg')}/>
本地图片可以无需指定尺寸(因为导入/打包在服务器端进行),默认是原始尺寸;如果指定了width,height不会自动的修改,
也必须手工赋值.
远程图片:<Image source={ {uri:'http://t.cn/logo.png'} } style={{width:x,height:x }}/>
注意:Image的source可以赋值为"远程图片的URL地址"或者"本地的图片数据"----本地图片
不能使用文件路径字符串!远程图片需要异步请求,初始时图片尺寸为0;请求完成后默认尺寸
仍然为0-----必须手工设置远程图片的尺寸 (防止页面重排)
Image组件的resizeMode决定了图片尺寸与组件尺寸不等如何缩放,可取值:
①cover:覆盖,等比例缩放图片,保证完全覆盖组件的宽和高,溢出部分不显示
②contain:包含,等比例缩放图片,保证容器可以完全容纳图片全部内容,可能出现留白
③stretch:拉伸,不等比例缩放图片,保证容器可以完全容纳图片的全部内容,不会留白
但图片变形.
④repeat:重复,等比例缩放图片,在容器中平铺图片,保证没有留白
⑤center:图片不拉伸直接放置在容器正中央.
重点:如何获取远程图片的原始尺寸?从而实现图片内容全部显示且无留白
Image.getSize(uri,(w,h)=>{ },(err)=>{ })
小知识:url、uri、urn三者间的关系?
Unified Resource Identifier:统一的 资源识别符
Unified Resource Locator:统一的资源定位符,如http://b.com/logo.jpg
Unified Resource Naming:统一的资源命名符,如tel:13312345435、mailto:tom@t.cn
URI= URL +URN
2.RN中的常用组件-----活动指示器
<ActivityIndicator size="small/large" color="#f00"/>
显示一个"加载中"的圆环动画图片;默认为小号,可以设置大号;
注意:页面中最后一个"活动指示器"的color会影响前面所有指示器的颜色.
使用本地图片时的经典错误:
this.state.list = [
'./src/asset1/0.jpg',
'./src/assets/1.jpg'
]
<View>
{
this.state.list.map((e, i)=>{
return <Image source={require(e)}/>
})
}
</View>
错误提示: Invalid call at line xx: require(e)
错误原因: require放在循环/选择中,变为动态导入,Webpack打包时不支持动态导入!
解决方法: 把动态导入变为静态导入:
this.state.list = [
require('./src/asset1/0.jpg'),
require('./src/assets/1.jpg')
]
<View>
{
this.state.list.map((e, i)=>{
return <Image source={ e }/>
})
}
</View>
3.RN中的常用组件——开关
<Switch value={ 布尔变量 } onValueChange={事件处理函数} />
属于需要进行“双向数据绑定”的受控组件,value是boolean数据
4.RN中的常用组件——触摸反馈
<TouchableOpacity>
其它组件(文字/图片等)
</TouchableOpacity>
提示:RN中提供了四个触摸反馈组件,其中TouchableOpacity是触摸后发生透明度的改变
5.RN中的常用组件——简单列表——难点&重点
高性能的列表组件——底层值挂载当前需要显示的列表项,以及上方/下方若干条即将被显示的列表项,更大范围内列的表项不进行挂载
<FlatList data={数组} renderItem={ this._renderItem } keyExtractor={this._keyExtractor} />
_renderItem = ( obj )=>{
//obj.item:是一个数据 obj.index:是该数据的下标
return (表示一个列表项的JSX)
}
FlatList组件的属性:
①data:必需的,数组类型,指定列表要渲染的数据
②renderItem:必需的,函数类型,指定如何渲染一个列表项
③keyExtractor:函数类型,指定如何提取每个列表项的key
④ListHeaderComponent:函数类型,指定列表头部内容
⑤ListFooterComponent:函数类型,指定列表尾部内容
⑥ItemSeparatorComponent:函数类型,指定列表项间的分隔条内容
⑦onEndReached:事件,指代滚动到了列表尾部
⑧onEndReachedThreshold:数字,0~1之间,指定滚动到距离底部还剩多远时触发onEndReached事件
6.RN中的路由和导航实现
提示:RN的运行不依赖于浏览器!没有window.navigator/history对象!甚至
没有Page的概念!------RN中切换是Screen,不是Page.
RN官方没有提供导航组件,推荐使用第三方导航组件:React Navigation
React Navigation的官网:https://reactnavigation.org/
ReactNavigation 的使用步骤:
①在当前项目下载必须的NPM包
npm i react-navigation
npm i react-navite-gesture-hanlder
npm i react-native-reanimated
②创建路由词典
③应用路由词典
④访问测试
RN中的常用组件-----图片的更多相关文章
- .NET6中一些常用组件的配置及使用记录,持续更新中。。。
NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...
- Extjs4中的常用组件:Grid、Tree和Form
至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...
- java.util.concurrent中的常用组件
一. CountDownLatch 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. CountDownLatch的一个非常典型的应用场景是:有一个任务想要往下执 ...
- android 中的常用组件
gradle gradle 是个啥,一开始我也没弄清,官方解释是: Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具 那么Apache Ant和Apache ...
- android app开发中的常用组件
1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...
- cocos 常用组件
前面的话 本文将详细介绍 cocos 中的常用组件 Sprite [概述] Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的 ...
- 第17讲- UI常用组件之ImageView图片浏览
第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...
- android开发常用组件【持续更新中。。。】
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- 杂谈SharpDx中的WIC组件——我们需要WIC的图片编码功能么?
在前文 SharpDX之Direct2D教程II——加载位图文件和保存位图文件 中,发现在VB2010中不能很好的运用SharpDx中的WIC组件进行图片的编码工作.可能是我的设置问题,也可能是Sha ...
随机推荐
- PHP中的11个魔术方法
1.__get.__set 这两个方法是为在类和他们的父类中没有声明的属性而设计的 __get( $property ) 当调用一个未定义的属性时访问此方法__set( $property ...
- php正则验证手机、邮箱
//验证电话private function reg_phone($phone){ if (preg_match("/^13[0-9]{1}[0-9]{8}$|15[0189] ...
- PHP中级篇 Apache配置httpd-vhosts虚拟主机总结及注意事项
经常使用Apache虚拟主机进行开发和测试,但每次需要配置虚拟主机时都习惯性的ctrl+c和ctrl+v,这次由于重装系统,需要配置一个新的PHP开发环境虚拟主机,于是总结一下Apaceh配置http ...
- 2019-2020-1 20199308《Linux内核原理与分析》第四周作业
<Linux内核分析> 第三章 MenuOS的构造 3.1 Linux内核源代码简介 操作系统的"两把宝剑" 中断上下文:保存现场和恢复现场 进程上下文 目录结构 ar ...
- 2019-2020-1 20199310《Linux内核原理与分析》第五周作业
1.问题描述 在前面的文章中,已经了解了Linux内核源代码的目录结构,并在Oracle VM VirtualBox的Linux环境中构造一个简单的操作系统MenuOS,本文将学习系统调用的相关理论知 ...
- ansible的role(6)
roles的优点 roles能够根据层次型结构自动的装载变化量文件,task,以及handles等. 要使用肉了是只需要在playbook中使用include引入即可. 主要使用场景复制代码较高的情况 ...
- 如何在没有安装 Python 的机器上运行 Python 程序
cmd 命令 1. pip install pyinstaller 2. pyinstaller <path to your prog.py> 3. 应用程序在prog.py同路径下的 d ...
- python- 函数高级
函数高级 一.默认参数 1.默认参数概念 默认参数指函数/方法在定义时为形参赋值,对应的形参称为默认参数. 默认参数是一个参数定义期的概念,与调用无关. 2.默认参数的作用 如果参数定义默认参数,在调 ...
- 乾颐堂7月HCIE、CCIE通过名单
拼多多都上市了,现在很多培训机构也流行公用一张PASS了,山寨总是山寨的,不脚踏实地总是欺骗自己7月(自然月)乾颐堂通过22名学员,每个考试日通过一名HCIE.CCIE 转载于:https://blo ...
- USACO Training Section 1.1黑色星期五Friday the Thirteenth
题目描述 13号又是一个星期五.13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数.给出N年的一个周期,要求计算1900年1月1日至1900+N- ...