Как обнаружить landscapeRight для landscapeLeft изменения ориентации в реагировать родной? - PullRequest
Новая
       35

Как обнаружить landscapeRight для landscapeLeft изменения ориентации в реагировать родной?

1 голос
/ 22 марта 2019

Мне нужно применить разные стили при смене ориентации между двумя пейзажными позициями, например, landscapeRight для landscapeLeft или наоборот в React Native?Я знаю, как определять между портретом и пейзажем, просто нужен слушатель между двумя пейзажами в РЕАКТИВНОМ ПОРЯДКЕ!Спасибо!

1 Ответ

1 голос
/ 22 марта 2019

Вам придется использовать внешнюю зависимость для управления этим.Что-то вроде react-native-orientation-locker может дать вам то, что вы хотите.Эта опция требует, чтобы вы использовали полный react-native проект, так как он потребует от вас связать собственный код, так что не будет работать в Expo.Вы можете прочитать больше об этом здесь .Ниже приведены основные инструкции по использованию репозитория.

Вы можете установить его следующим образом: 

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

Добавьте следующее в 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 он получит следующее:

  • 'PORTRAIT'
  • 'LANDSCAPE-LEFT' кнопка левой камеры камеры вправо
  • 'LANDSCAPE-RIGHT'камера вправо домой кнопка слева
  • 'PORTRAIT-UPSIDEDOWN'
  • 'UNKNOWN'
...