React Native 混合编程 之常用API

时间:2024-05-19 18:23:47

React Native 提供以下的常用API

Alert:跨平台的提示框

AppRegisty:注册React Native 应用的入口

AsyncStorage:React Native 提供的键-值存储系统。

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

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

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

定时器:setInterval/clearInterval 创建和销毁定时器


一、屏幕设置相关API

 新建Screen.js文件

 1.获取屏幕宽高:Dimensions:

   React Native 混合编程 之常用API


  React Native 混合编程 之常用API



2 获取屏幕分辨率 PixeRatioo API

React Native 混合编程 之常用API 

React Native 混合编程 之常用API

React Native 混合编程 之常用API


知识点:

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

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

  常见设备的屏幕缩放比例为:

  React Native 混合编程 之常用API

运行效果

React Native 混合编程 之常用API


二 动画 API

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

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

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


  1.RequestAnimationFrame  API 帧动画

     创建Animation.js

    React Native 混合编程 之常用API

   调用类

   React Native 混合编程 之常用API 

  运行效果

  React Native 混合编程 之常用API

再次对 Animation.js修改

React Native 混合编程 之常用API

React Native 混合编程 之常用API

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

2.LayoutAnimation API布局动画

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

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

    configureNext函数用于配置动画效果:

      duration:动画时长

      create:组件创建时的动画

      updata:组件更新时的动画

      delete:组件销毁时的动画


     动画类型:

       spring: 弹跳

       linear:线性

       easeInEaseOut:缓入缓出

       easeIn:缓入

       easeOut:缓出

   opacity:透明度

   scaleXY:缩放

   对Animation.js修改

   React Native 混合编程 之常用API

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


 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文件

       React Native 混合编程 之常用API

在其他文件中引用运行。

3.2 串行动画   

    创建AnimatedThrough.js

    React Native 混合编程 之常用API

   React Native 混合编程 之常用API

       在其他文件中引入运行

  

    React Native 混合编程 之常用API  React Native 混合编程 之常用API


3.3 并行动画

    再做一次简单的修改

   React Native 混合编程 之常用API

 动画简单的学习完毕,实际开发中还得看需求而定!


二、其他更加丰富的API

1.AlertIOS 提示框

2.Geolocation 定位

3.Keyboard

4 NetInfo 设备网络状态