React Native Learning-control the third-party component of the screen: react-native-orientation

In the project, may sometimes want to make different page display of the screen is not the same, such as the previous paragraph I do "calisthenics" project, in the first page, it is definitely want to make the page for vertical screen display, but the playback page for the horizontal screen display, even if the user's mobile phone can be turned screen, our playback page is displayed.

With this requirement, we can take advantage of React-native's third-party components, react-native-orientation.

Official Document: Https://github.com/yamill/react-native-orientation

Installation

1. If the project is running, close the simulator and terminal;

2. Execute the installation command: NPM install--save react-native-orientation;

3. Execution command: RNPM link

4. Now that the version used is 1.15.0,link executed, we need to manually configure

Ios:

1. Open the project with Xcode, right click on the project name, select "Add Files to ' project name '";

2. Locate the path file: Project folder/node_modules/react-native-orientation/rctorientation, add the file;

3. Then re-run the project;

Android:

Usage

Componentwillmount () { //judging screen var initial = Orientation.getinitialorientation (); if (initial = = = ' PORTRAIT ') { //do stuff } else { //do other stuff } //Only vertical screen Orientation is allowed . Locktoportrait (); Only horizontal screen orientation.locktolandscape () allowed;}

Functions

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

The returned results are LANDSCAPE PORTRAIT UNKNOWN PORTRAITUPSIDEDOWN

• getSpecificOrientation(function(err, specificOrientation)

The returned results are LANDSCAPE-LEFT LANDSCAPE-RIGHT PORTRAIT UNKNOWNPORTRAITUPSIDEDOWN

In the official documentation, there are also a few events that can be found in the official documentation to learn more.

React Native Learning-control the third-party component of the screen: react-native-orientation