反応するネイティブ向きの実装例

Question

私は反応ネイティブで新しいです。私は、アイオスのためのオリエンテーションを実装するのに問題があります。私は反応するネイティブの方向を使用しようとしています。私はドキュメントを読んだが、とにかくそれを行うことはできない。 「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 
 
     } 
 
    } 
 

 

 

 
};

このエクサmpleは、デバイスがタブレットまたはモバイルであることを把握することです。タブレットの場合は、画面をランドスケープとしてロックし、モバイルの場合は、画面をポートレートとしてロックします。

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