通过
babel plugin
的形式转换RN
的尺寸,使其按照标准屏幕尺寸等比例缩放,达到自适应的效果。
# yarn
> yarn add babel-plugin-rn-size
# npm
> npm install babel-plugin-rn-size
# pnpm
> pnpm install babel-plugin-rn-size
babel.config.json
{
// ...
"plugins": [
[
"babel-plugin-rn-size",
{
"includes": ["src/"],
"flatListIncludes": ["src/"],
"defaultScreen": {
"width": 375,
"height": 667
}
}
]
]
}
index.ts/tsx/js/jsx
import 'babel-plugin-rn-size/utils/useRnSize';
// ...
includes
只转换配置目录的代码
flatListIncludes
只转换配置目录的代码(flatList)
defaultScreen
默认屏大小(375*667),即是设计稿约定标准屏幕
通过添加注释:@@ignore__adaptive
,取消某个数值的自动转换逻辑
<Animated.View
style={[
styles.overlayRectangle,
{
bottom: topOverlayBottomBoundary /* @@ignore__adaptive */, // 这个尺寸不会被转换
left: verticalOverlayLeftBoundary /* @@ignore__adaptive */, // 这个尺寸不会被转换
right: verticalOverlayRightBoundary, // 这个尺寸会被自动转换
backgroundColor: props.backdropColor,
},
]}
/>