React Native Android APP开发笔记 之 屏幕的竖屏锁定及翻转

React Native Android APP开发笔记

第一章 屏幕的竖屏锁定及翻转

---

前言

在安卓应用的日常开发中会遇到屏幕翻转导致页面横屏展示，有可能会影响用户使用，所以在实际开发中会设置整个app的竖屏、横屏锁定或者真对单个页面的锁定，下面将真对屏幕的锁定需求提供两种解决方案

---

一、通过android:screenOrientation属性实现

在android\app\src\main\AndroidManifest.xml 中设置 android:screenOrientation属性的值来实现横屏(landscape)、竖屏(portrait)锁定，在纯RN项目中设置在默认的一个activity即可，android原生混编项目中相应页面的activity也需要单独设置

二、通过 react-native-orientation组件设置页面的屏幕锁定

1.引入库

通过yarn安装

yarn add react-native-orientation

通过npm安装

npm install react-native-orientation --save

import Orientation from 'react-native-orientation';

2.实现单个页面的横屏锁定

代码如下（示例）：

  componentWillMount() {
    //页面渲染前强制横屏
    Orientation.lockToLandscape();
  }
  componentWillUnmount() {
    //页面销毁后恢复竖屏
    Orientation.lockToPortrait();
  }

---

总结

在纯rn项目中使用android:screenOrientation可以设置整个app，当针对单个页面设置页面翻转可以配合react-native-orientation来实现