react-native - 如何检测 landscapeRight 到 landscapeLeft 方向的变化？

Question

我需要对两个横向位置之间的方向变化应用不同的样式，即在 React Native 中从 landscapeRight 到 landscapeLeft 或者反之亦然？我知道如何在纵向和横向之间进行检测，只需要在 REACT NATIVE 中的两个横向位置之间有一个监听器!谢谢!

Answer 1

您必须使用外部依赖项来管理它。像 react-native-orientation-locker 这样的东西可以给你你想要的。此选项要求您使用完整的 react-native 项目，因为它将要求您链接 native 代码，因此它不会在 Expo。您可以阅读更多相关信息 here .以下是存储库中的基本使用说明。

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

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

链接后，您还需要执行一些额外的步骤。

配置

iOS

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

+#import "Orientation.h"

@implementation AppDelegate

// ...

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

@end

安卓

在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);
+   }

    // ......
}

获取方向:

然后你可以在你想要访问方向的地方设置一个监听器，通常你在 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 函数中，它将接收以下内容之一:

• '肖像'
• 'LANDSCAPE-LEFT' 相机左侧主页按钮右侧
• 'LANDSCAPE-RIGHT' 摄像头右侧主页按钮左侧
• '纵向颠倒'
• '未知'