如何检测landscapeRight到landscapeLeft方向的变化反应原生？

Question

我需要在两个风景位置之间应用不同的风格，即在React Native中的landscapeRight到landscapeLeft或反之亦然？我知道如何在肖像和风景之间进行检测，只需要在REACT NATIVE中的两个风景位置之间进行监听！谢谢！

Answer 1

您必须使用外部依赖项来管理它。像react-native-orientation-locker这样的东西可以给你你想要的东西。此选项要求您使用完整的react-native项目，因为它将要求您链接本机代码，因此它将无法在Expo中工作。你可以阅读更多关于它here。以下是回购的基本使用说明。

您可以通过以下方式安装它：

npm install react-native-orientation-locker --save
react-native link react-native-orientation-locker

链接后需要执行一些额外步骤。

Configuration

iOS

将以下内容添加到项目的AppDelegate.m中：

+#import "Orientation.h"

@implementation AppDelegate

// ...

+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [Orientation getOrientation];
+}

@end

Android

将以下内容添加到android / app / src / main / AndroidManifest.xml中

<activity
  ....
  + android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
  ....
</activity>

实现onConfigurationChanged方法（在MainActivity.java中）

// ...

+import android.content.Intent;
+import android.content.res.Configuration;

public class MainActivity extends ReactActivity {

+   @Override
+   public void onConfigurationChanged(Configuration newConfig) {
+       super.onConfigurationChanged(newConfig);
+       Intent intent = new Intent("onConfigurationChanged");
+       intent.putExtra("newConfig", newConfig);
+       this.sendBroadcast(intent);
+   }

    // ......
}

Getting the orientation:

然后你可以设置一个你想要访问方向的监听器，通常你在componentDidMount中添加它并删除它在componentWillUnmount中移动它。

以下是一些可用于设置的示例代码。

import Orientation from 'react-native-orientation-locker';


_onOrientationDidChange = (orientation) => {
  if (orientation === 'LANDSCAPE-LEFT') {
    //do something with landscape left layout
  } 
  if (orientation === 'LANDSCAPE-RIGHT') {
    //do something with landscape right layout
  } 
};

componentWillMount() {
  //The getOrientation method is async. It happens sometimes that
  //you need the orientation at the moment the js starts running on device.
  //getInitialOrientation returns directly because its a constant set at the
  //beginning of the js code.
  var initial = Orientation.getInitialOrientation();
  if (initial === 'PORTRAIT') {
    //do stuff
  } else {
    //do other stuff
  }
},

componentDidMount() {

  Orientation.getAutoRotateState((rotationLock) => this.setState({rotationLock}));
  //this allows to check if the system autolock is enabled or not.

  Orientation.lockToPortrait(); //this will lock the view to Portrait
  //Orientation.lockToLandscapeLeft(); //this will lock the view to Landscape
  //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations

  //get current UI orientation
  /*
  Orientation.getOrientation((orientation)=> {
    console.log("Current UI Orientation: ", orientation);
  });

  //get current device orientation
  Orientation.getDeviceOrientation((deviceOrientation)=> {
    console.log("Current Device Orientation: ", deviceOrientation);
  });
  */

  Orientation.addOrientationListener(this._onOrientationDidChange);
},

componentWillUnmount () {
  Orientation.removeOrientationListener(this._onOrientationDidChange);
}

这意味着在你的_onOrientationDidChange函数中，它将收到以下信息：

• 'PORTRAIT'
• 'LANDSCAPE-LEFT'相机左侧主页按钮右侧
• 'LANDSCAPE-RIGHT'相机右主页按钮离开
• 'PORTRAIT-UPSIDEDOWN'
• 'UNKNOWN'