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

 

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

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