反應原生取向實施示例需要

Question

我是反應原生新的。我在ios實現方向時遇到問題。我正在嘗試使用反應原生方向。我已閱讀文檔，但無法執行。請不要用「lockToPortrait（），lockToLandscape（）或getOrientation（function（err，orientation））等方法來回答，我已經閱讀過了。任何人都可以用一段工作代碼做出響應，這對我來說就足夠了。

感謝

Answer 1

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

class YourApp extends Component { 
    componentDidMount() { 
     Orientation.lockToPortrait(); 
    } 
    render() { 
     <MainComponent /> 
    } 
} 

AppRegistry.registerComponent('YourApp',() => YourApp); 

爲我工作就好了。

Answer 2

import React, {PureComponent} from 'react'; 
 
import { 
 
    View, 
 
    Text, 
 
    Dimensions 
 
} from 'react-native'; 
 
import Orientation from 'react-native-orientation'; 
 

 

 
const { 
 
    width: deviceScreenWidth, 
 
    height: deviceScreenHeight 
 
} = Dimensions.get('window'); 
 

 
let aspectRatio = deviceScreenWidth/deviceScreenHeight; 
 
export default class Home extends PureComponent { 
 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 

 
    render() { 
 
     return (
 
      <View style={style.homeMainContainer}> 
 
       <Text>Atif dont let this screen rotate</Text> 
 
      </View> 
 
     ) 
 
    }// end of render 
 

 
    componentDidMount() { 
 

 
     if (deviceScreenWidth > deviceScreenHeight) { 
 
      Orientation.lockToLandscape(); 
 
     } else { 
 
      Orientation.lockToPortrait(); 
 
     } 
 

 
     // this unlocks any previous locks to all Orientations 
 
     // Orientation.unlockAllOrientations(); 
 

 
     Orientation.addOrientationListener(this._orientationDidChange); 
 
    } 
 

 
    _orientationDidChange = (orientation) => { 
 
     if (orientation === 'LANDSCAPE') { 
 
      // do something with landscape layout 
 
     } else { 
 
      // do something with portrait layout 
 
     } 
 
    } 
 

 

 

 
};

這EXA mple是要弄清楚該設備是平板電腦還是移動設備，如果是平板電腦，它將鎖定屏幕爲橫屏，如果是移動設備，則會將屏幕鎖定爲縱向。

This is the library as package first you have to install the package link : https://www.npmjs.com/package/react-native-orientation