问答

react-native 如何切换横竖屏?

作者:admin 2021-09-15 我要评论

目前代码 import Orientation from 'react-native-orientation';TouchableOpacityonPress={() = { const initial = Orientation.getInitialOrientation(); if (i...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

目前代码

import Orientation from 'react-native-orientation';

<TouchableOpacity
onPress={() => {
  const initial = Orientation.getInitialOrientation();
  if (initial === 'PORTRAIT') {
    // 当前竖屏
    Orientation.lockToLandscapeLeft();
  } else {
    // 当前非竖屏
    Orientation.lockToPortrait();
  }
}}
style={{alignSelf: 'center', marginLeft: 10, marginRight: 10}}>
    // ....
</TouchableOpacity>

但是这么写我发现他始终只能从竖屏点击后到横屏
但是竖屏点击后, 再也没法从竖屏回到横屏
请问这是为什么呢?

环境:

  • 雷电模拟器
###

建议使用react-native-orientation-locker 这个库

react-native-orientation bug 比较多

getInitialOrientation是在开头用的,并不是实时的
你打印一下 initial 的值 就知道了

通过

Orientation.addOrientationListener(orientation=>{
    console.log(orientation)
});

这个监听获取确切的是否横屏

###

不在模拟器的环境也不行吗?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react-native 如何切换横竖屏?

    react-native 如何切换横竖屏?

  • 关于移码的问题

    关于移码的问题

  • webpack打包优化

    webpack打包优化

  • nuxtjs中打包项目 vendor文件过大

    nuxtjs中打包项目 vendor文件过大

腾讯云代理商
海外云服务器