React&RN关键点集锦，持续更新......

来源：互联网发布：技术标制作软件下载编辑：程序博客网时间：2024/05/17 23:23

1、获取设备宽、高、像素比

import Dimensions from 'Dimensions';import PixelRatio from 'PixelRatio';let totalWidth = Dimensions.get('window').width; // 宽度let totalHeight = Dimensions.get('window').height; // 高度let pixelRatio = PixelRation.get(); //像素比

2、安卓下Image组件source属性使用uri无法设置本地图片

<Image source={{uri: 'logo.png'}}/>

这样无法设置图片，就按设置了宽高也不行。按照官网上的设置，这样是可以的。我的RN版本是0.44.0，这种方式加载网络图片也是可以的。因为图片uri是变量，所以不可以使用require()来加载图片。

最终采取的方法是将图片放在app中。即将图片文件放在项目目录\\android\app\src\main\res\drawable-xxx文件夹下。如图。
这里写图片描述

针对不同分辨率的屏幕建立不同的文件夹。将图片放到其中。然后再项目中引用的时候，直接使用图片的名字，不需要加后缀。比如在drawable-xxhdpi中我有一个图片名字为zalm.png，那么再项目中，写法如下：

<Image source={{uri: 'zalm'}} style={{width: 100, height: 100}}/>

3、ScrollView分页时用到的属性（官网上未列出）

<ScrollView  ref="scrollView"  horizontal={true}  showsHorizontalScrollIndicator={false}  pagingEnabled={true}  onMomentumScrollEnd={this.onMomentumScrollEnd}  onScrollBeginDrag={this.onScrollBeginDrag}  onScrollEndDrag={this.onScrollEndDrag}  >  {this.renderImage()}</ScrollView>

onMomentumScrollEnd:滚动趋势结束的时候，得到当前的偏移量，除以屏幕宽度，可以得知目前处于第几张图片。

onMomentumScrollEnd = (e) => {  let offsetX = e.nativeEvent.contentOffset.x;  let currentPage = offsetX / totalWidth;  this.setState({    currentPage  })}

onScrollBeginDrag:手动滑动的时候，这个时候清除定时器。

onScrollEndDrag:手指离开页面的时候。重新开始定时器。

ref="scrollView":在定时器中，调用ScrollView组件的scrollTo方法让该组件滑动到相应偏移量。

scrollView.scrollTo({x:offsetX ,y:0, animated: true})

0 0