React Native 混合编程 之常用API
React Native 提供以下的常用API
Alert:跨平台的提示框
AppRegisty:注册React Native 应用的入口
AsyncStorage:React Native 提供的键-值存储系统。
Dimensions:用于获取设备的屏幕宽高
Platform:用于获取设备当前运行的平台名称
StyleSheet:提供了一种类似CSS样式表的抽象。
定时器:setInterval/clearInterval 创建和销毁定时器
一、屏幕设置相关API
新建Screen.js文件
1.获取屏幕宽高:Dimensions:
2 获取屏幕分辨率 PixeRatioo API
知识点:
屏幕尺寸是指手机屏幕对角线的英寸数;屏幕分辨率是指屏幕宽高像素数;屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。
屏幕分辨率 = 屏幕宽高 * 屏幕缩放比例
常见设备的屏幕缩放比例为:
运行效果
二 动画 API
RequestAnimationFrame:是个简单粗暴的动画API,通过不断改变state的值,来实现组件的动画效果
LayoutAnimation:体验和性能更好,适用于全局的动画配置,实现单个动画非常简洁方便
Animated: 最强大的动画API,适用于实现灵活丰富的动画效果,例如多个动画的组合动画。
1.RequestAnimationFrame API 帧动画
创建Animation.js
调用类
运行效果
再次对 Animation.js修改
运行效果动画不明显而且显得生硬,实现不了“淡入淡出”和“弹性动画”
2.LayoutAnimation API布局动画
当组件的布局变化时,会自动将组件运行到新的位置上。
使用LayoutAnimation 的常用方法是 调用 .LayoutAnimation.configureNext,然后使用setState设置组件的属性
configureNext函数用于配置动画效果:
duration:动画时长
create:组件创建时的动画
updata:组件更新时的动画
delete:组件销毁时的动画
动画类型:
spring: 弹跳
linear:线性
easeInEaseOut:缓入缓出
easeIn:缓入
easeOut:缓出
opacity:透明度
scaleXY:缩放
对Animation.js修改
运行后动画效果明显而且柔和。
3.Animated API 动画
Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start()/stop()方法来控制动画按顺序执行。
使用Animated 最简单的工作流程就是创建一个Animated.Value,将其绑定到组件的一个或多个样式属性上。然后可以通过动画驱动它,例如 Animated.timing,或通过Animated.event将其关联到一个手势上,例如拖动或者滑动操作。除了样式,Animated.value还可以绑定到props上。
Animated 动画类型:
spring:弹跳
timing:渐变
decay:以一个初始速度开始并且逐渐减慢停止
Animated动画支持的组件有以下几种
Animated.Text
Animated.Image
Animated.View
3.1跳弹动画
创建Animated.js文件
在其他文件中引用运行。
3.2 串行动画
创建AnimatedThrough.js
在其他文件中引入运行
3.3 并行动画
再做一次简单的修改
动画简单的学习完毕,实际开发中还得看需求而定!
二、其他更加丰富的API
1.AlertIOS 提示框
2.Geolocation 定位
3.Keyboard
4 NetInfo 设备网络状态
以上是 React Native 混合编程 之常用API 的全部内容, 来源链接: utcz.com/z/382126.html