React-Native: @hortau/react-native-orientation-locker

记 iOS 横竖屏没有效果的处理方法 

npm官网文档：@hortau/react-native-orientation-locker - npm

在 Android 端，不需要任何配置。

主要是 ios ，

#import "Orientation.h"


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

使用场景

首先、国内很多APP基本很少有需求要求APP能跟随系统自动横屏。

如果要求跟随系统自动横屏，利用次组件监听系统的横竖屏状态，重新计算设备的宽高、安全区域，也是可以做的，相对来说麻烦一些，后续有空也会单独出一篇文章分享经验心得。

1、视频播放页面，如下图所示。这类页面可以监听用户设备的横竖屏状态，改变视频的全屏播放状态。但是最简单的做法是用户点击全屏播放，再改变设备横竖屏状态。跟国内腾讯视频、爱奇艺、优酷等差不多的效果。注意的是，返回操作可以控制是返回上一页还是切换到竖屏、而安卓的物理返回键或者在屏幕左侧右滑返回的时候，一定要在页面卸载函数中让APP切换到竖屏。

代码分享：

import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {commonSize, commonStyle} from 'src/assets/css/commonStyle';
import {SafeAreaView} from 'react-native-safe-area-context';
import {CustomNavbar, HeightSpacer} from 'src/components';
import VideoPlayer from 'react-native-media-console';
import Orientation from '@hortau/react-native-orientation-locker';
import {useNavigation} from '@react-navigation/native';

const VideoPlay = () => {
  const [edges, setEdges] = useState(['right', 'top', 'left']);
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [disableBack, setDisableBack] = useState(true);
  const navigation = useNavigation();

  const videoInfo = {
    url: 'https://solar.huawei.com/-/media/SolarV4/solar-version2/asia-pacific/cn/success-stories/2023/Storie20/video/construction_flash_video.mp4',
    width: 569,
    height: 320,
    duration: 138000,
  };

  useEffect(() => {
    return () => {
      Orientation.lockToPortrait();
      setEdges(['right', 'top', 'left']);
      setIsFullScreen(false);
      setDisableBack(true);
    };
  }, []);

  return (
    <SafeAreaView
      edges={edges}
      style={[
        commonStyle.container,
        isFullScreen ? commonStyle.bg000 : commonStyle.bgFFF,
      ]}>
      {!isFullScreen && <CustomNavbar headerTitle={'视频播放'} />}
      <View
        style={[
          commonStyle.flexCenter,
          isFullScreen
            ? styles.fullVideoBox
            : styles.defVideoBox(videoInfo.width, videoInfo.height),
        ]}>
        <VideoPlayer
          navigator={navigation}
          controlTimeoutDelay={3000}
          disableBack={disableBack}
          showTimeRemaining={true}
          showHours={true}
          isFullscreen={isFullScreen}
          source={{
            uri: videoInfo.url,
          }}
          onEnterFullscreen={() => {
            Orientation.lockToLandscape();
            setEdges(['right', 'left']);
            setIsFullScreen(true);
            setDisableBack(false);
          }}
          onExitFullscreen={() => {
            Orientation.lockToPortrait();
            setEdges(['right', 'top', 'left']);
            setIsFullScreen(false);
            setDisableBack(true);
          }}
          onBack={() => {
            Orientation.lockToPortrait();
            setEdges(['right', 'top', 'left']);
            setIsFullScreen(false);
            setDisableBack(true);
          }}
        />
      </View>
      <HeightSpacer />
    </SafeAreaView>
  );
};

export default VideoPlay;

const styles = StyleSheet.create({
  defVideoBox: (width, height) => ({
    width: commonSize.width,
    height: (commonSize.width * height) / width,
  }),
  fullVideoBox: {
    width: '100%',
    height: '100%',
  },
});

2、需要使用签名组件的时候，可以在签名的时候横屏，签名确认后切换竖屏。