React Native 如何获取屏幕大小

在 React Native 中，获取屏幕大小可以使用 Dimensions API。这个 API 提供了一个 get 方法，通过它可以获取显示屏的宽度和高度。

import { Dimensions } from 'react-native';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

console.log(`Screen width: ${screenWidth}, Screen height: ${screenHeight}`);

这里我们传递 'window' 参数给 Dimensions.get() 方法，这是因为我们希望获取整个屏幕的大小，而不是某个特定的元素的大小。

注意，Dimensions 对象是只读的。这意味着应用程序的尺寸不会动态更改。因此，如果您需要实时获取屏幕大小，您应该侦听 Dimensions 对象上的事件。

import { Dimensions } from 'react-native';

// 初始化时获取屏幕宽高
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;

console.log(`Initial screen width: ${screenWidth}, Initial screen height: ${screenHeight}`);

// 监听屏幕尺寸变化事件
Dimensions.addEventListener('change', (event) => {
  screenWidth = event.window.width;
  screenHeight = event.window.height;

  console.log(`New screen width: ${screenWidth}, New screen height: ${screenHeight}`);
});

在这个例子中，我们先获取了初始屏幕宽高，并输出了这些值。然后我们添加了一个监听器，监听 Dimensions 对象的 change 事件。每当屏幕大小发生变化时，我们将更新屏幕宽高，并输出这些新值。

这里我们通过 event.window 属性来获取 width 和 height 的最新值。

这就是在 React Native 中如何获取屏幕大小。记住，Dimensions 对象提供了一种简单而又可靠的方式来获取屏幕大小，但请注意它是只读的。