记 iOS 横竖屏没有效果的处理方法
在 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、需要使用签名组件的时候,可以在签名的时候横屏,签名确认后切换竖屏。