React Native JS Api

琑952024-03-26 15:04

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

复制代码

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