React Native 混合编程之常用API

@H_301_0@React Native 提供以下的常用API

@H_301_0@Alert：跨平台的提示框

@H_301_0@AppRegisty:注册React Native 应用的入口

@H_301_0@AsyncStorage：React Native 提供的键-值存储系统。

@H_301_0@Dimensions:用于获取设备的屏幕宽高

@H_301_0@Platform：用于获取设备当前运行的平台名称

@H_301_0@StyleSheet：提供了一种类似CSS样式表的抽象。

@H_301_0@定时器：setInterval／clearInterval 创建和销毁定时器

@H_301_0@

@H_301_0@一、屏幕设置相关API

@H_301_0@新建Screen.js文件

@H_301_0@1.获取屏幕宽高：Dimensions:

@H_301_0@

@H_301_0@2 获取屏幕分辨率 PixeRatioo API

@H_301_0@

@H_301_0@知识点：

@H_301_0@ 屏幕尺寸是指手机屏幕对角线的英寸数；屏幕分辨率是指屏幕宽高像素数；屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。

@H_301_0@ 屏幕分辨率 = 屏幕宽高 * 屏幕缩放比例

@H_301_0@ 常见设备的屏幕缩放比例为：

@H_301_0@

@H_301_0@运行效果

@H_301_0@

@H_301_0@二动画 API

@H_301_0@ RequestAnimationFrame:是个简单粗暴的动画API，通过不断改变state的值，来实现组件的动画效果

@H_301_0@ LayoutAnimation:体验和性能更好，适用于全局的动画配置，实现单个动画非常简洁方便

@H_301_0@ Animated: 最强大的动画API，适用于实现灵活丰富的动画效果，例如多个动画的组合动画。

@H_301_0@

@H_301_0@ 1.RequestAnimationFrame API 帧动画

@H_301_0@ 创建Animation.js

@H_301_0@

@H_301_0@ 调用类

@H_301_0@

@H_301_0@ 运行效果

@H_301_0@

@H_301_0@再次对 Animation.js修改

@H_301_0@运行效果动画不明显而且显得生硬，实现不了“淡入淡出”和“弹性动画”

@H_301_0@2.LayoutAnimation API布局动画

@H_301_0@ 当组件的布局变化时，会自动将组件运行到新的位置上。

@H_301_0@ 使用LayoutAnimation 的常用方法是调用 .LayoutAnimation.configureNext,然后使用setState设置组件的属性

@H_301_0@ configureNext函数用于配置动画效果：

@H_301_0@ duration:动画时长

@H_301_0@ create:组件创建时的动画

@H_301_0@ updata:组件更新时的动画

@H_301_0@ delete:组件销毁时的动画

@H_301_0@

@H_301_0@ 动画类型：

@H_301_0@ spring：弹跳

@H_301_0@ linear:线性

@H_301_0@ easeInEaSEOut:缓入缓出

@H_301_0@ easeIn:缓入

@H_301_0@ eaSEOut:缓出

@H_301_0@ opacity:透明度

@H_301_0@ scaleXY:缩放

@H_301_0@ 对Animation.js修改

@H_301_0@

@H_301_0@ 运行后动画效果明显而且柔和。

@H_301_0@

@H_301_0@3.Animated API 动画

@H_301_0@ Animated仅关注动画的输入与输出声明，在其中建立一个可配置的变化函数，然后使用简单的start（）／stop（）方法来控制动画按顺序执行。

@H_301_0@ 使用Animated 最简单的工作流程就是创建一个Animated.Value，将其绑定到组件的一个或多个样式属性上。然后可以通过动画驱动它，例如 Animated.timing,或通过Animated.event将其关联到一个手势上，例如拖动或者滑动操作。除了样式，Animated.value还可以绑定到props上。

@H_301_0@ Animated 动画类型：

@H_301_0@ spring:弹跳

@H_301_0@ timing:渐变

@H_301_0@ decay:以一个初始速度开始并且逐渐减慢停止

@H_301_0@ Animated动画支持的组件有以下几种

@H_301_0@ Animated.Text

@H_301_0@ Animated.Image

@H_301_0@ Animated.View

@H_301_0@ 3.1跳弹动画

@H_301_0@ 创建Animated.js文件

@H_301_0@

@H_301_0@在其他文件中引用运行。

@H_301_0@3.2 串行动画

@H_301_0@ 创建AnimatedThrough.js

@H_301_0@

@H_301_0@ 在其他文件中引入运行

@H_301_0@

@H_301_0@3.3 并行动画

@H_301_0@ 再做一次简单的修改

@H_301_0@动画简单的学习完毕，实际开发中还得看需求而定！

@H_301_0@

@H_301_0@二、其他更加丰富的API

@H_301_0@1.AlertIOS 提示框

@H_301_0@2.Geolocation 定位

@H_301_0@3.Keyboard

React Native 混合编程 之常用API

猜你在找的React相关文章

React Native 混合编程之常用API