React Native JS Api

Dimensions

本模块用于获取设备屏幕的宽高。

复制代码
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

PixelRatio

可以获取到设备的像素密度和字体缩放比。

复制代码
//像素密度: PixelRatio.get()
//字体缩放比: PixelRatio.getFontScale()
//将一个布局尺寸(dp)转换为像素尺寸(px): PixelRatio.getPixelSizeForLayoutSize()

Platform

获取平台信息

复制代码
Platform.OS
Platform.constants
Platform.select({
    android: {
        backgroundColor: 'green'
    },
    ios: {
        backgroundColor: 'red'
    },
    default: {
        // other platforms, web for example
        backgroundColor: 'blue'
    }
})

const Mycom = Platform.select({
  android:()=><Text>android</Text>,
  ios:()=><Text>ios</Text>
})

Share

复制代码
const result = await Share.share(
    {message:'分享的内容'},
    {dialogTitle:'标题'}
);
if (result.action === Share.sharedAction) {}

Animated

创建动画

复制代码
//1. 创建样式初始值
this.state = {
    opacity: new Animated.Value(0)
}
const fadeAnim = useRef(new Animated.Value(10)).current;
//2.定时样式值变化
Animated.timing(
  // timing方法使动画值随时间变化
  this.state.opacity, // 要变化的动画值
  {
    	toValue: 100, // 最终的动画值
      	duration: 500,
      	delay: 0
  },
).start( callback ); // 动画完成后可调用 callback 
// *timing可以换成spring,有反弹效果动画
//3.使用 <Animated.View></Animated.View> 组件

代码展示

javascript 复制代码
import{
  Dimensions,
  PixelRatio,

} from "react-native";
javascript 复制代码
return{
  const size = Dimensions.get("window");
  console.log(size);
  console.log(PixelRatio.get());
}
相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
前端康师傅16 小时前
JavaScript 作用域
前端·javascript
云枫晖16 小时前
JS核心知识-事件循环
前端·javascript