RN如何将指定的页面横屏



  • 有关于React-native横批显示的第三方插件吗,试了下react-native-orientation发现它是将所有的页面都横屏了,这样就会导致一个问题,大家有没有只让一个页面横屏的插件那。



  • 我也想了解这个问题。



  • 自己写个Native Module试试
    getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

    getCurrentActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);



  • 我参照react-native-orientation做了一下简化程序
    新建manager类,CalendarManager
    .m文件中实现
    @implementation CalendarManager

    @synthesize bridge=_bridge;

    //如果默认竖屏设置为UIInterfaceOrientationMaskPortrait
    //横屏UIInterfaceOrientationMaskLandscape
    static UIInterfaceOrientationMask _orientation = UIInterfaceOrientationMaskPortrait;

    • (void)setOrientation: (UIInterfaceOrientationMask)orientation {
      _orientation = orientation;
      }
    • (UIInterfaceOrientationMask)getOrientation {
      return _orientation;
      }
      //只竖屏
      RCT_EXPORT_METHOD(lockToPortrait)
      {
      #if DEBUG
      NSLog(@"Locked to Portrait");
      #endif
      [CalendarManager setOrientation:UIInterfaceOrientationMaskPortrait];
      [[NSOperationQueue mainQueue] addOperationWithBlock:^ {
      [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger: UIInterfaceOrientationPortrait] forKey:@"orientation"];
      }];

    }
    //接触锁屏
    RCT_EXPORT_METHOD(unlockAllOrientations)
    {
    #if DEBUG
    NSLog(@"Unlock All Orientations");
    #endif
    [CalendarManager setOrientation:UIInterfaceOrientationMaskAllButUpsideDown];
    // AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    // delegate.orientation = 3;
    }

    在AppDelegate.h中添加

    • (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
      return [CalendarManager getOrientation];
      }

    在某个想要做特殊处理的js页,调用lockToPortrait/unlockAllOrientations方法,界面返回时再调用对应方法。



  • @williamlk 退出那个页面的时候再锁回竖屏不就好了?

    componentDidMount() {
      Orientation.unlockAllOrientations();
    }
    
    componentWillUnmount() {
      Orientation.lockToPortrait();
    };

登录后回复