LandScape无法使用React本机?当IOS / Android设备关闭模式时自动旋转

时间:2017-02-13 10:47:44

标签: react-native

我正在开发基于反应原生方向的示例应用程序。实际上,方向是有效的。当我去一个特定的页面时,我想要横向模式。这没有问题,在这种情况下显示横向模式,但是当我尝试设备时转向纵向模式。但是当我转向肖像或风景我想要显示只有风景不是肖像。

我正在使用此模块并编写此代码:

var Orientation = require(' react-native-orientation');

class XOrating extends React.Component {
   constructor(props){
    super(props);
    this.state={

       HEIGHT:667,
       WIDTH:375


    }
  }

componentWillMount(){

  if(this.props.sportName == 'Pro Football'){
    Orientation.lockToLandscape();

    this.setState({
      HEIGHT:375,
      WIDTH:667


    })
  }
  else{
   Orientation.lockToPortrait();
  }

}

 _orientationDidChange(orientation) {
    if (orientation == 'LANDSCAPE') {

      Orientation.lockToLandscape();
      //do something with landscape layout
    } else if(orientation == 'PORTRAIT') {
      //do something with portrait layout   
       Orientation.lockToLandscape();
    }
  }

   componentWillUnmount() {
    Orientation.getOrientation((err,orientation)=> {
      console.log("Current Device Orientation: ", orientation);
    });
    Orientation.removeOrientationListener(this._orientationDidChange);
  }


componentDidMount(){


    Orientation.addOrientationListener(this._orientationDidChange);

 }

render(){
return(
<Image source={{uri:this.state.ImgBackground}} style={{width:this.state.WIDTH,
              height:this.state.HEIGHT, top:0, left:0}}>   
)
}

module.exports = XOrating;

在自动旋转中隐藏设备时,请建议我想要适合横向模式

1 个答案:

答案 0 :(得分:0)

是的,最后我得到了我正在做的错误......

我只是在AppDelegate.m文件中添加两行,然后清理x代码并运行。

#import "../../node_modules/react-native-orientation/iOS/RCTOrientation/Orientation.h"


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