最近用react-native开发Android App，设计上原型对应的是374*614屏幕的手机，考虑到响应式的问题，将设计数值抽成了一个函数。
- 根据屏幕宽度变化来走的响应式函数：calculateWidth
- 根据屏幕高度变化来走的响应式函数：calculateHeight
1
2
3
4
5
6
7
8
9
10
11
| import { Dimensions } from "react-native"
// screenWidth为设计图对应的屏幕宽度
// screenHeight为设计图对应的屏幕高度
const screenWidth:number = 374;
const screenHeight:number = 614;
const calculateWidth = (width: number) => {
return (Dimensions.get("screen").width / screenWidth) * width
}
const calculateHeight = (height: number) => {
return (Dimensions.get("screen").height / screenHeight) * height
}
|
运用：
还原设计图时，相应的数值都用calculateWidth或calculateHeight转化一下：
