React Native 集成 react-native-orientation(横竖屏插件)以及代码示例

在 React Native 中，为了支持横竖屏切换，我们通常需要使用第三方插件。react-native-orientation 是一个常用的横竖屏切换插件，支持 iOS 和 Android 平台。下面我们将介绍如何将 react-native-orientation 集成到 React Native 项目中，并给出具体的代码示例。
步骤 1：安装 react-native-orientation
首先，需要在 React Native 项目中安装 react-native-orientation。在项目根目录下运行以下命令：

npm install react-native-orientation

或者使用 yarn：

yarn add react-native-orientation

步骤 2：链接库文件
在安装完插件后，需要将其链接到 React Native 项目中。运行以下命令：

react-native link react-native-orientation

步骤 3：导入和使用插件
在需要使用横竖屏切换的组件中，导入 react-native-orientation 插件：

import { Orientation } from 'react-native-orientation';

然后，可以使用 Orientation 对象的方法来获取当前屏幕方向和设置屏幕方向。以下是一些常用的方法：

• Orientation.getOrientationAsync(): 异步获取当前屏幕方向。
• Orientation.setOrientationAsync('portrait'): 异步设置屏幕方向为竖屏。
• Orientation.setOrientationAsync('landscape'): 异步设置屏幕方向为横屏。
• Orientation.lockOrientationAsync('portrait'): 异步锁定屏幕方向为竖屏。
• Orientation.lockOrientationAsync('landscape'): 异步锁定屏幕方向为横屏。
• Orientation.unlockOrientation(): 解锁屏幕方向设置。

  // 获取当前屏幕方向
  Orientation.getOrientationAsync().then((result) => {
  console.log('当前屏幕方向：', result);
  });
  // 设置屏幕方向为竖屏
  Orientation.setOrientationAsync('portrait').then((result) => {
  console.log('设置竖屏成功：', result);
  });
  // 设置屏幕方向为横屏
  Orientation.setOrientationAsync('landscape').then((result) => {
  console.log('设置横屏成功：', result);
  });
  // 锁定屏幕方向为竖屏
  Orientation.lockOrientationAsync('portrait').then((result) => {
  console.log('锁定竖屏成功：', result);
  });
  // 锁定屏幕方向为横屏
  Orientation.lockOrientationAsync('landscape').then((result) => {
  console.log('锁定横屏成功：', result);
  });