Как сделать Screen Orientation?

Для управления ориентацией экрана в приложении React Native можно использовать модуль react-native-orientation. Этот модуль предоставляет API для установки и блокировки ориентации экрана на разных платформах.

Первым шагом будет установка react-native-orientation. Для этого вам нужно выполнить следующую команду в корневой директории вашего React Native проекта:

npm install react-native-orientation

После установки модуля вам нужно подключить его к вашему проекту. Для этого откройте файл MainApplication.java, который находится в директории android/app/src/main/java/com/yourproject и добавьте следующие строки:

import com.github.yamill.orientation.OrientationPackage; // <- добавьте эту строку

// ...

public class MainApplication extends Application implements ReactApplication {
  // ...

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
  
    // ...
  
    packages.add(new OrientationPackage()); // <- добавьте эту строку
  
    return packages;
  }
 
  // ...
}

Если у вас уже есть другие пакеты, установленные в вашем проекте, то просто добавьте new OrientationPackage() в метод getPackages().

После подключения react-native-orientation вы можете использовать его API для управления ориентацией экрана. Вот несколько примеров:

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import Orientation from 'react-native-orientation';

const App = () => {
  // Блокировка ориентации
  useEffect(() => {
    Orientation.lockToPortrait(); // Заблокировать в портретной ориентации
    // Доступные методы: lockToPortrait, lockToLandscapeLeft, lockToLandscapeRight, lockToPortraitUpsideDown, lockToLandscape
    return () => {
      Orientation.unlockAllOrientations(); // Разблокировать все ориентации перед выходом
    };
  }, []);

  // Включение и отключение ориентации
  const toggleOrientation = () => {
    if (Orientation.getAutoRotateState()) {
      Orientation.lockToPortrait(); // Заблокировать в портретной ориентации
    } else {
      Orientation.unlockAllOrientations(); // Разблокировать все ориентации
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Toggle Orientation" onPress={toggleOrientation} />
    </View>
  );
};

export default App;

Обратите внимание, что блокировка ориентации осуществляется только на основании пользовательских действий. В то же время разблокировка ориентации может выполниться автоматически, например, при переходе на новый экран или при выходе из приложения.

Надеюсь, эта информация поможет вам управлять ориентацией экрана в вашем приложении React Native!