乐清网站,盘锦网站建设vhkeji,具有品牌的微网站建设,应用商店免费下载文章目录 一、前言二、实现思路三、延伸阅读四、拓展阅读 一、前言
应用RN技术栈实现APP上线后#xff0c;业务部门领导会上反馈未实现ipad横屏全屏展示#xff0c;用户体验较差。由此#xff0c;一场pad横屏全屏展示的APP调优工作由此开展。
二、实现思路
时间紧任务重业务部门领导会上反馈未实现ipad横屏全屏展示用户体验较差。由此一场pad横屏全屏展示的APP调优工作由此开展。
二、实现思路
时间紧任务重技术实现上考虑到存量功能代码改造工作量RN层面对于横屏改造工作量较大故RN层面整体实现横屏展示时间上不允许RN侧改造方案放弃。
由于业务方只关注APP某一功能模块故将改造范围缩减当业务方点击APP功能模块入口时允许APP解除屏幕方向锁定让屏幕方向根据设备的物理方向自动调整。当应用退出当前关注功能模块时APP屏幕方向锁定不允许屏幕方向根据设备的物理方向自动调整。
实现代码如下 安装步骤
npm i --save react-native-orientation
react-native link react-native-orientation (自动link不成功建议手动link)进入功能模块时
import Orientation from react-native-orientation;onPress{() {// 解除屏幕方向锁定让屏幕方向根据设备的物理方向自动调整console.log(----------解除屏幕方向锁定让屏幕方向根据设备的物理方向自动调整---------);Orientation.unlockAllOrientations();....
}}退出功能模块时
import Orientation from react-native-orientation;initData () {// 锁定屏幕竖屏锁定console.log(----------锁定屏幕竖屏锁定---------);Orientation.lockToPortrait();
};按照以上实现思路实施后发现android系统下的pad表现较好能够按照预期设想自动实现APP横竖屏切换且内容适配。
但是iOS系统下的iPad表现不尽如人意虽然可以实现屏幕横竖屏自动切换但是当APP处于横屏状态下时页面展示效果存在未完全铺展开的适配问题。
按照网上给出的解决方案
对于iOS在ios/Info.plist文件中包括以下行就可以了
keyUISupportedInterfaceOrientations/key
arraystringUIInterfaceOrientationPortrait/string
/arraykeyUISupportedInterfaceOrientations~ipad/key
arraystringUIInterfaceOrientationLandscapeRight/stringstringUIInterfaceOrientationLandscapeLeft/stringstringUIInterfaceOrientationPortrait/stringstringUIInterfaceOrientationPortraitUpsideDown/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
官方文档中还有一些事件的介绍详细可以到官方文档上了解学习。
四、拓展阅读
《react-native-orientation 官方文档》
