React Native Flexbox 横向调整

Question

我正在为 React Native 应用程序制作一些 UI 元素。 我需要这些元素在横向和纵向方向上都能工作。

我使用 Flexbox 来组织元素，在纵向模式下看起来不错，但是当我切换到横向模式时，我得到的东西看起来像这样 ，我认为这是由于 phone 的尺寸，因此在切换方向时 flexbox 被改变

我只是想知道处理这种情况的最佳方法是什么，我已经看到一些应用程序根据设备的方向呈现不同的代码，但我希望找到一个解决方案，而不是需要那么多努力

Answer 1

1- 你可以使用 useWindowDimensions 钩子，当我们在横向和纵向模式之间切换时，它会自动计算宽度和高度。

const {width, height} = useWindowDimensions();

2- 然后，你可以设置一个布尔变量来检测你是否处于横向

const isLandscapeMode = 宽度 > 高度？真：假；

3- 现在，您可以根据 isLandscapeMode 变量

在样式之间切换

如果你不喜欢内联样式，你也可以这样做