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

②创建路由词典

③应用路由词典

④访问测试