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中的常用组件-----图片的更多相关文章

  1. .NET6中一些常用组件的配置及使用记录,持续更新中。。。

    NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...

  2. Extjs4中的常用组件:Grid、Tree和Form

    至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Col ...

  3. java.util.concurrent中的常用组件

    一. CountDownLatch 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. CountDownLatch的一个非常典型的应用场景是:有一个任务想要往下执 ...

  4. android 中的常用组件

    gradle gradle 是个啥,一开始我也没弄清,官方解释是: Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具 那么Apache Ant和Apache ...

  5. android app开发中的常用组件

    1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...

  6. cocos 常用组件

    前面的话 本文将详细介绍 cocos 中的常用组件 Sprite [概述] Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的 ...

  7. 第17讲- UI常用组件之ImageView图片浏览

    第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...

  8. android开发常用组件【持续更新中。。。】

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  9. 杂谈SharpDx中的WIC组件——我们需要WIC的图片编码功能么?

    在前文 SharpDX之Direct2D教程II——加载位图文件和保存位图文件 中,发现在VB2010中不能很好的运用SharpDx中的WIC组件进行图片的编码工作.可能是我的设置问题,也可能是Sha ...

随机推荐

  1. PHP中静态(static)调用非静态方法详解--调用!!!

    来源:https://www.cnblogs.com/yolo-bean/p/7739265.html 这里分析了php面向对象中static静态属性和静态方法的调用.关于它们的调用(能不能调用,怎么 ...

  2. scrollview 和 listview滑动冲突解决

    http://blog.csdn.net/wanghao200906/article/details/51084975 http://www.cnblogs.com/shitianzeng/artic ...

  3. 消息中间件metaq

    消息中间件metaq安装并注册到zookper集群 项目地址 https://github.com/killme2008/Metamorphosis Memorphosis是一个消息中间件,它是lin ...

  4. java 之 构造器 static关键字

    构造器  特点: 方法名和类名一至,没有void没有返回,无参数的称为无参构造器,有参数的称为有参构造器 语法: public 类名 {数据类型 参数名} 目的:创建对象 注意:如果类中没有带有参数的 ...

  5. 《Redis设计与实现》之第十二章:事件

    Redis服务器是一个事件驱动程序,服务器需要处理两类事件: 文件事件: 文件事件就是服务器对套接字(socket)操作的抽象,服务器和客户端的通信会产生文件事件 时间事件: 时间事件就是服务器对定时 ...

  6. 1745 Divisibility

    Divisibility Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14084 Accepted: 4989 Descrip ...

  7. 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源

    新蜂商城 Vue 版本 2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商 ...

  8. Redis 6.0 新特性-多线程连环13问!

    Redis 6.0 来了 在全国一片祥和IT民工欢度五一节假日的时候,Redis 6.0不声不响地于5 月 2 日正式发布了,吓得我赶紧从床上爬起来,学无止境!学无止境! 对于6.0版本,Redis之 ...

  9. Flutter 粘合剂CustomScrollView控件

    老孟导读:快乐的51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后的项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起 ...

  10. Oracle的pl/sql变量类型

    pl/sql定义 sql是结构化查询语言.sql是不是一个编程语言?编程语言一般都能够声明变量,写条件判断,循环.sql不具备这些特征,所有sql不是一门编程语言.我们在实际的开发中,有这种需要,把s ...