如何在React Native中获取横向模式下的屏幕宽度

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

不要使用

Dimenstions.get('window').width

，而是使用 React Native 的

useWindowDimensions()

钩子。这提供了纵向或横向模式屏幕的实际宽度。

import { useWindowDimensions } from 'react-native';
const {width} = useWindowDimensions();
console.log({width})

Answer 5

如果知道

render

中的屏幕宽度对您来说就足够了，只需在

Dimensions.get('window').width

方法中使用

render

即可。这个调用的结果会随着方向的变化而改变。