在 React Native 应用程序中使用全宽和全高答案

【问题标题】：Using full width and height in React Native app在 React Native 应用程序中使用全宽和全高
【发布时间】：2022-12-15 10:02:15
【问题描述】：

在我的 React Native 应用程序中，我想让每个设备的屏幕尺寸都动态变化。目前它在android和IOS上运行良好。但是当我尝试在平板电脑上运行时，它会在选项卡中间显示移动版本的大小和宽度，如下所示：

我也想在平板电脑中使用完整的高度和宽度。不是这样的。我应该在哪里改变？

【问题讨论】：

你能分享这个屏幕的代码吗

标签： react-native

【解决方案1】：

从图像中，我怀疑您只选择了 iPhone 而不是 iPad 的部署。

在 Xcode 中，在名为 Deployment Info 的部分中，选中“iPad”复选框。

对于 Android，如果它没有缩放到平板电脑的完整尺寸，那么您可能需要将以下内容添加到 AndroidManifest：

<uses-feature android:name="android.hardware.telephony" android:required="false" />

最后，在您的代码中，如果您想使用每个设备的完整尺寸，请考虑使用 useDimensions 并将其应用于您的样式：

见https://reactnative.dev/docs/usewindowdimensions

下面的伪代码：

import React from 'react'
import { useWindowDimensions } from 'react-native';
import { View, Text } from "react-native";


export default function Sample() {
  const { height, width } = useWindowDimensions();
  return (
    <View style={{height, width}}>
      <Text>Sample</Text>
    </View>
  )
}

【讨论】：