React Native 如何获取窗口宽度和高度
在本文章中,我们将探讨两种不同的方法来获取React Native应用程序中的屏幕宽度和高度。
屏幕尺寸,包括宽度和高度,在设计适应不同设备和方向的用户界面时起着至关重要的作用。通过理解这些尺寸,开发人员可以创建响应式布局,并在不同设备上提供连贯的用户体验。
先决条件
- 熟悉React Native
- React Native组件
- React Hooks
- Expo CLI
- Node.js和npm
创建React Native应用程序的步骤
第1步: 使用Expo CLI创建React Native应用程序
为 <<项目名称>>创建一个新的React Native项目。
步骤2:将目录更改为项目文件夹:
项目结构
项目的结构将如下所示:
方法1:使用 Dimensions 模块
在这种方法中,利用 Dimensions 模块来获取屏幕的宽度和高度。通过调用 Dimensions.get(‘window’),可以访问并使用 Text 组件显示这些尺寸。
示例: 在这个示例中,我们使用了上面解释的方法。
步骤4:要启动React Native应用程序,请导航到终端或命令提示符,并执行必要的命令。
- 在Android上运行:
- 在iOS上运行:
输出:
方法2:使用useWindowDimensions
在这种方法中,我们将使用useWindowDimensions钩子来轻松访问屏幕的宽度和高度。
示例: 代码定义了一个名为“App”的React Native组件,展示了设备屏幕的尺寸。它从’react-native’导入必要的组件,同时利用useWindowDimensions钩子来获取屏幕的宽度和高度。
输出: