React Native學習－控制橫豎屏第三方組件：react-native-orientation

在項目中，有時候可能會想使不同的頁面顯示的橫豎屏也不一樣，比如前一段我做的《廣播體操》的項目，在首頁面，肯定是想使頁面為豎屏顯示，但是播放頁面要為橫屏顯示，即使用戶的手機可以轉屏，我們的播放頁面也要是橫屏顯示。

有這樣的需求，我們可以借助react-native的第三方組件，react-native-orientation。

官方文檔：https://github.com/yamill/react-native-orientation

安裝

1.如果項目正在運行，先關閉模擬器和終端；

2.執行安裝命令：npm install --save react-native-orientation；

3.執行命令：rnpm link

4.現在使用的版本為1.15.0，link執行過之后，我們要需要手動配置

iOS：

1.用Xcode打開項目，右鍵點擊項目名稱，選擇 “Add Files to ‘項目名’ “ ；

2.找到路徑文件：  項目文件夾/node_modules/react-native-orientation/RCTOrientation  ，將該文件添加上；

3.然后重新運行項目；

Android：

用法

componentWillMount() {
    // 判斷橫豎屏幕
    var initial = Orientation.getInitialOrientation();
    if (initial === 'PORTRAIT') {
      //do stuff
    } else {
      //do other stuff
    }
    
    // 只允許豎屏
    Orientation.lockToPortrait();
    //只允許橫屏
    Orientation.lockToLandscape();
}

Functions

• lockToPortrait()
• lockToLandscape()
• lockToLandscapeLeft()
• lockToLandscapeRight()
• unlockAllOrientations()
• getOrientation(function(err, orientation)

返回的結果有 LANDSCAPE PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN 

• getSpecificOrientation(function(err, specificOrientation)

 返回的結果有 LANDSCAPE-LEFT LANDSCAPE-RIGHT PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN

 

官方文檔中，還有一些事件的介紹，詳細可以到官方文檔上了解學習。