react-native-orientation

设备的横竖屏的判断

github

1:install:

npm install react-native-orientation --save

2:Android:

android/setting.gradle或者项目根目录找到setting.gradle

include ':app' include ':react-native-orientation' project(':react-native-orientation').projectDir = new File(rootProject.projectDir, './node_modules/react-native-orientation/android')

android/app/build.gradle或者项目根目录找到app/build.gradle

... dependencies { ... compile project(':react-native-orientation') }

Register module (in MainApplication.java)或者在根目录找到app/src/com/android/browser/page/HomePage.java

import com.github.yamill.orientation.OrientationPackage; // <--- import public class MainApplication extends Application implements ReactApplication { ...... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new OrientationPackage() <------- Add this ); } ...... } 或者 package com.android.browser.page; import com.github.yamill.orientation.OrientationPackage; public class HomePage extends FrameLayout implements ViewPager.OnPageChangeListener,IPageUiController { ... private void initLayout() { ... mReactInstanceManager = ReactInstanceManager.builder() .setApplication(((Activity)mContext).getApplication()) .setBundleAssetName("index.android.bundle") .setJSBundleFile(getJSBundleFilePath()) .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new OrientationPackage()) .addPackage(new RNSvgPackage()) .addPackage(new RNFSPackage()) .addPackage(new ControllerReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); ... } }

index.android.js:

import {AppRegistry} from 'react-native'; import App from './App'; AppRegistry.registerComponent('LeecoBrowser', () => App);

App.js:

import React, { Component } from 'react'; import { View, Text, } from 'react-native'; import Orientation from 'react-native-orientation'; //横竖屏判断模块 class App extends Component { constructor(props) { super(props); } componentWillMount() { var initial = Orientation.getInitialOrientation(); if (initial === 'PORTRAIT') { console.log("现在是竖屏") } else { console.log("现在是横屏") } } componentDidMount() { //Orientation.lockToPortrait();//锁定竖屏 //Orientation.lockToLandscape();//锁定横屏 //Orientation.lockToLandscapeLeft();//锁定横屏,顶部位于右侧,从右到左,方向向左 //Orientation.lockToLandscapeRight();//锁定横屏,顶部位于左侧,从左到右,方向向右 //Orientation.unlockAllOrientations();//不锁屏幕 Orientation.addOrientationListener(this._orientationDidChange); } componentWillUnMount() { Orientation.getOrientation((err,orientation)=> { console.log("Current Device Orientation: ", orientation); }); Orientation.removeOrientationListener(this._orientationDidChange); } _orientationDidChange(orientation){ console.log("屏幕横竖屏切换了") if (orientation == 'LANDSCAPE') { console.log("现在是横屏") } else { console.log("现在是竖屏") } } render() { return (

测试Dimensions的使用 ) } } export default App;

竖屏摇一摇结果：

现在是竖屏

横屏摇一摇结果：

现在是横屏

竖屏切换横屏结果：

屏幕横竖屏切换了 现在是横屏

横屏切换竖屏结果：

屏幕横竖屏切换了 现在是竖屏