react-native 横竖屏控制及状态变化监听

用框架react-native-orientation可以轻易做到。

1. 安装依赖

npm install --save react-native-orientation

2. 自动链接库

react-native link react-native-orientation

如果自动链接失败，则看官方文档，手动链接，传送门。

3. 使用方式
   引入Orientation后，用这个组件的Api能做到反转横屏和竖屏啦。这里列出几个常用方法：

Orientation.lockToPortrait() //转成竖屏
Orientation.lockToLandscape() //转成横屏
Orientation.lockToLandscapeLeft() //转成横屏（向左）
Orientation.lockToLandscapeRight() //转成横屏（向右）

一个简单的例子：

import Orientation from 'react-native-orientation'

...//省略其他代码

<Button 
  title={this.state.buttonTitle} 
  onPress={() => {
    this.state.buttonTitle === '全屏' ?
    Orientation.lockToLandscape() :
    Orientation.lockToPortrait();
    this.setState({buttonTitle: this.state.buttonTitle === '全屏' ? '退出全屏' : '全屏'})
    console.log(this.state.buttonTitle)}} />

---

欢迎加我微信，拉进群交流哦！

微信二维码