ReactNative进阶(三十六):iPad横屏适配

文章目录

一、前言

应用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) 返回的结果有 LANDSCAPEPORTRAITUNKNOWNPORTRAITUPSIDEDOWN
  • getSpecificOrientation(function(err, specificOrientation) 返回的结果有 LANDSCAPE-LEFTLANDSCAPE-RIGHTPORTRAITUNKNOWNPORTRAITUPSIDEDOWN

官方文档中,还有一些事件的介绍,详细可以到官方文档上了解学习。

四、拓展阅读

相关推荐
木西1 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(铸造NFT-前端部分)
前端·react native·web3
OEC小胖胖4 小时前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
梨子同志5 小时前
Redux
react.js
古茗前端团队5 小时前
方向键滚不动?带你搞懂 tabindex 的工作原理
react.js
朦胧之5 小时前
前端项目设计
前端·vue.js·react.js
江城开朗的豌豆6 小时前
为什么在render里调setState,代码会和你“翻脸”?
前端·javascript·react.js
江城开朗的豌豆6 小时前
子组件改状态,父组件会“炸毛”吗?
前端·javascript·react.js
CF14年老兵7 小时前
我为什么放弃了 React(或许你也该试试)🔥
react.js·svelte·trae
再学一点就睡15 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
潘小安18 小时前
『译』React useEffect:早知道这些调试技巧就好了
前端·react.js·面试