在 React Native 中处理不同的屏幕答案

【问题标题】：Handle different Screens in React Native在 React Native 中处理不同的屏幕
【发布时间】：2020-10-09 03:39:34
【问题描述】：

我是一名 android 开发人员，我是 react-native 的新手。任何人都可以帮助我了解如何在原生反应中处理 android 和 ios 手机中的多种屏幕尺寸和方向变化吗？谢谢！

【问题讨论】：

标签： android ios react-native screen-size

【解决方案1】：

首先您可以通过平台

检查您的设备

import {Platform} from 'react-native';

{
  "OS": "ios",
  "Version": "14.0",
  "__constants": {
    "forceTouchAvailable": false,
    "interfaceIdiom": "phone",
    "isTesting": false,
    "osVersion": "14.0",
    "reactNativeVersion": { "major": 0, "minor": 61, "patch": 5 },
    "systemName": "iOS",
  },
  "constants": {
    "forceTouchAvailable": false,
    "interfaceIdiom": "phone",
    "isTesting": false,
    "osVersion": "14.0",
    "reactNativeVersion": { "major": 0, "minor": 61, "patch": 5 },
    "systemName": "iOS",
  },
  "isPad": false,
  "isTV": false,
  "isTVOS": false,
  "isTesting": false,
  "select": [Function select],
}

然后您可以通过钩子检查组件的尺寸 useWindowDimensions

{"fontScale": 1, "height": 896, "scale": 2, "width": 414}

或Dimensions - 您可以在应用程序的任何位置使用它

import {Dimensions} from 'react-native';

const dimensions = Dimensions.get('screen');

然后只比较宽度和高度。

如果你需要处理方向改变，你可以像这样使用 lib react-native-orientation

【讨论】：

【解决方案2】：

React Native 的 Dimensions 模块用于此目的。 https://reactnative.dev/docs/dimensions

import { Dimensions } from 'react-native';

// Always call Dimensions only inside the function/class. The value could change otherwise.

const windowWidth = Dimensions.get('window').width; // Window width
const windowHeight = Dimensions.get('window').height; //Window height

const windowWidth = Dimensions.get('screen').width; //Screen height
const windowHeight = Dimensions.get('screen').height; //Screen width

//To listen to changes
Dimensions.addEventListener('change', (e) => {
  const { width, height } = e.window;
  //Then just use it. ?
})

用于方向检测检查https://adrianhall.github.io/react%20native/2017/07/26/handling-orientation-changes-in-react-native/

【讨论】：