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

最新推荐文章于 2025-04-10 18:00:00 发布

原创最新推荐文章于 2025-04-10 18:00:00 发布 · 868 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

React-RN 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了React Native开发中的一些实用技巧，包括如何获取设备尺寸、解决Android下Image组件使用URI加载本地图片的问题以及ScrollView分页时使用的特定属性。

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})