文章目录
一、前言
应用RN技术栈实现APP上线后,业务部门领导会上反馈未实现ipad横屏全屏展示,用户体验较差。由此,一场pad横屏全屏展示的APP调优工作由此开展。
二、实现思路
时间紧任务重,技术实现上,考虑到存量功能代码改造工作量,RN层面对于横屏改造工作量较大,故RN层面整体实现横屏展示时间上不允许,RN侧改造方案放弃。
由于业务方只关注APP某一功能模块,故将改造范围缩减,当业务方点击APP功能模块入口时,允许APP解除屏幕方向锁定,让屏幕方向根据设备的物理方向自动调整。当应用退出当前关注功能模块时,APP屏幕方向锁定,不允许屏幕方向根据设备的物理方向自动调整。
实现代码如下:
安装步骤:
javascript
npm i --save react-native-orientation
react-native link react-native-orientation (自动link不成功,建议手动link)
进入功能模块时,
javascript
import Orientation from 'react-native-orientation';
onPress={() => {
// 解除屏幕方向锁定,让屏幕方向根据设备的物理方向自动调整
console.log('----------解除屏幕方向锁定,让屏幕方向根据设备的物理方向自动调整---------');
Orientation.unlockAllOrientations();
....
}}
退出功能模块时,
javascript
import Orientation from 'react-native-orientation';
initData = () => {
// 锁定屏幕竖屏锁定
console.log('----------锁定屏幕竖屏锁定---------');
Orientation.lockToPortrait();
};
按照以上实现思路实施后,发现android系统下的pad表现较好,能够按照预期设想自动实现APP横竖屏切换,且内容适配。
但是,iOS系统下的iPad表现不尽如人意,虽然可以实现屏幕横竖屏自动切换,但是当APP处于横屏状态下时,页面展示效果存在未完全铺展开的适配问题。
按照网上给出的解决方案:
对于iOS,在ios/Info.plist
文件中包括以下行就可以了:
objectivec
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationLandscapeRight</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>
经实践发现问题依旧存在。
三、延伸阅读
react-native-orientation
组件可用函数如下:
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation(function(err, orientation)
返回的结果有LANDSCAPE
、PORTRAIT
、UNKNOWN
、PORTRAITUPSIDEDOWN
;getSpecificOrientation(function(err, specificOrientation)
返回的结果有LANDSCAPE-LEFT
、LANDSCAPE-RIGHT
、PORTRAIT
、UNKNOWN
、PORTRAITUPSIDEDOWN
;
官方文档中,还有一些事件的介绍,详细可以到官方文档上了解学习。