简介
react-native-dimensions-provider 是一个 React Native 的 npm 包，它提供了一种简便的方式来获取设备的屏幕宽度和高度。
安装
在你的 React Native 项目根目录下执行以下命令安装：
npm install react-native-dimensions-provider --save
使用
- 首先，在你的 React Native 应用程序的根组件（通常是
App.js）中，将数据提供者导入并嵌套其中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------------------
----- --- - -- -- -
--------------------
------ --
---------------------
--
------ ------- ----- 然后，在你需要获取设备尺寸的组件中，导入
withDimensions高级组件并使用它来包装你的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ - -------------- - ---- -----------------------------------
----- ----------- - -- ---------- -- -- -
----- -------- ------ ----------------- ------- ----------------- ---
--- ---- --------- ---- ---- ---- ---
-------
--
------ ------- ----------------------------如何工作
当你使用 DimensionsProvider 嵌套子组件时，它会将屏幕的尺寸作为 React 的上下文提供给任何需要该信息的子组件。
withDimensions 高阶组件实际上是使用这个上下文来获取屏幕的尺寸，然后将它作为一个名为 dimensions 的 prop 传递到被包装的组件中。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - -------------- - ---- -----------------------------------
----- ----------- - -- ---------- -- -- -
----- -------- ------ ----------------- ------- ----------------- ---
------------------------ - --------------------------
-------
--
------ ------- ----------------------------这个例子创建一个 MyComponent 组件，它使用 withDimensions 高级组件并显示设备的屏幕尺寸。注意，dimensions prop 包含了宽度和高度属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da27b