如何在反应本机中以横向模式获取屏幕宽度

Question

我想在 React Native 中制作一些组件，使其在纵向模式和横向模式下都具有屏幕宽度。目前，我以这样的样式获得肖像：

width: Dimensions.get('window').width

但这不适用于景观。当我切换设备时，组件的宽度不会横向覆盖屏幕的宽度。它是屏幕的一半。

请问我如何让它填满屏幕宽度？

Answer 1

您可以执行以下操作

_onLayout = event => console.log(event.nativeEvent.layout); // width, height, x, y
 // On your Wrapper
 <View onLayout={this._onLayout} />

如文档中所述

{nativeEvent: { layout: {x, y, width, height}}}

Answer 2

在纵向模式下，您可以将宽度设置为窗口的宽度和高度，如下所示：

width: Dimensions.get('window').width

但是，在横向模式下，窗口的宽度和高度会互换。因此，在这种情况下，您必须将宽度设置为：

width: Dimensions.get('window').height

Answer 3

如果您使用的是功能组件，则可以使用 useWindowDimensions 挂钩，它将在方向更改时返回更新的值。

import {useWindowDimensions} from 'react-native';
const {width, height} = useWindowDimensions();

Answer 4

如果知道render中的屏幕宽度对您来说就足够了，只需在render方法中使用Dimensions.get('window').width即可。此调用的结果将随方向而变化。