RN Framework Multi-screen Adaptation Guide
Multi-screen adaptation refers to: During mobile application development, when the app needs to run on multiple devices, it needs to adapt to different screen sizes and resolutions, as well as different interaction methods. Developers need the app's UI and display to adapt to various shapes and sizes of phone screens, making the app's element display consistent on different platforms and phones, with unified user visual and operation experience.
In UI adaptation, React Native provides several methods to set UI component height and width. This document focuses on four key adaptation methods: FlexBox layout, pixel density and device type, Dimensions API and useWindowDimensions Hook API.
Flexbox Layout
Official Documentation: Using Flexbox Layout
Flexbox is a CSS layout model designed to provide flexible, adaptive arrangement for web pages. In React Native, Flexbox rules are used to specify child element layout of components. Flexbox can provide consistent layout structure across different screen sizes.
Generally, using flexDirection, alignItems and justifyContent three style properties can meet most layout needs.
Flex Direction
Specifying flexDirection in component's style determines the layout's main axis. The main axis determines which direction axis child elements should align along. Default value is vertical axis (column) direction.
column(default): Align child elements from top to bottom.row: Align child elements from left to right.column-reverse: Align child elements from bottom to top.row-reverse: Align child elements from right to left.
Align Items
Specifying alignItems in component's style determines child elements' alignment along cross axis (axis perpendicular to main axis). Available options:
stretch(default): Stretch container's child elements to match container's cross axis height.flex-start: Align container's child elements to container's cross axis start position.flex-end: Align container's child elements to container's cross axis end position.center: Center align container's child elements on container's cross axis.baseline: Align container's child elements along common baseline.
Justify Content
Specifying justifyContent in component's style determines child elements' alignment along main axis. Available options:
flex-start(default): Align child elements in container along main axis start position.flex-end: Align child elements in container along main axis end position.center: Center align child elements in container on main axis.space-between: Evenly distribute child elements on container's main axis, distributing remaining space between child elements.space-around: Evenly distribute child elements on container's main axis, distributing remaining space around each child element.space-evenly: Evenly distribute child items along main axis in alignment container.
For more layout properties and sample code, refer to Official Documentation.
Device Type + Pixel Density
isPad, isTV
Official Documentation: Platform API
Platform API contains isPad and isTV methods, returning boolean values to determine if current device is iPad or TV.
PixelRatio
Official Documentation: PixelRatio API
PixelRatio can get device pixel density and font scale ratio.
get()method: Returns device pixel density.
Dimensions API
Official Documentation: Dimensions API
Dimensions can get device screen width and height.
useWindowDimensions Hook API
Official Documentation: useWindowDimensions Hook
useWindowDimensions is a React Hook that can get current window width and height in component.