React Native에서 회전을 비활성화하는 방법은 무엇입니까?

React Native에서 회전을 비활성화하는 방법은 무엇입니까?

---

세로보기 만 지원하고 싶습니다. React Native 앱이 자동 회전하지 않도록하려면 어떻게해야합니까? 문서 및 Github 문제 검색을 시도했지만 도움이되는 내용을 찾지 못했습니다.

---

React Native 앱은 거의 일반적인 iOS 애플리케이션이므로 다른 모든 앱에서와 똑같은 방식으로 할 수 있습니다. 일반 응용 프로그램 속성에서 허용 된 장치 방향으로 "Landscape Left"및 "Landscape Right"를 선택 취소 (XCode에서)하기 만하면됩니다.

---

2017 업데이트 : {"orientation": "portrait"}

Currently many official React Native guides like this one recommend using Expo when building React Native apps so in addition to existing answers I'll also add an Expo-specific solution which is worth noting because it works for both iOS and Android and you only need to set it once with no need to mess with XCode config, AndroidManifest.xml etc.

Setting orientation at build time:

If you're building your React Native apps with Expo then you can use the orientation field in your app.json file - for example:

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

It can be set to "portrait", "landscape" or "default" which means to autorotate with no orientation lock.

Setting orientation at runtime:

You can also override that setting at runtime by running, for example:

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE);

where the argument can be:

• ALL — All 4 possible orientations
• ALL_BUT_UPSIDE_DOWN — All but reverse portrait, could be all 4 orientations on certain Android devices.
• PORTRAIT — Portrait orientation, could also be reverse portrait on certain Android devices.
• PORTRAIT_UP — Upside portrait only.
• PORTRAIT_DOWN — Upside down portrait only.
• LANDSCAPE — Any landscape orientation.
• LANDSCAPE_LEFT — Left landscape only.
• LANDSCAPE_RIGHT — Right landscape only.

Detecting the rotation:

When you allow more than one orientation then you can detect the changes by listening to the change events on the Dimensions object:

Dimensions.addEventListener('change', (dimensions) => {
  // you get:
  //  dimensions.window.width
  //  dimensions.window.height
  //  dimensions.screen.width
  //  dimensions.screen.height
});

or you can also just get the dimensions anytime with Dimensions.get('window') and Dimensions.get('screen') like this:

const dim = Dimensions.get('window');
// you get:
//  dim.width
//  dim.height

or:

const dim = Dimensions.get('screen');
// you get:
//  dim.width
//  dim.height

When you listen to the event you get both window and screen at the same time so that's why you access it differently.

Documentation:

For more info see:

• https://docs.expo.io/versions/latest/guides/configuration.html#orientation
• https://docs.expo.io/versions/latest/sdk/screen-orientation.html
• https://facebook.github.io/react-native/docs/dimensions.html

---

For iOS, Jarek's answer is great.

For Android, you need to edit the AndroidManifest.xml file. Add the following line to each activity that you want to lock into portrait mode:

android:screenOrientation="portrait" 

So, a full example might look like this:

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:screenOrientation="portrait">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

See full list of available screenOrientation properties in the docs, here: https://developer.android.com/guide/topics/manifest/activity-element.html

---

If you using Expo you can do it simply with this code:

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT);

Put it on App.js before render

All options:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

---

use this for ios ipad orientaion issue want to change in plist file https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

IOS:

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>

---

RN expo 프로젝트를 사용 중이고 앱에 react-navigation이 포함되어 있다면 다음 코드에 대한 탐색을 설정하는 것이 도움이되었습니다.

const AppNavigator = createStackNavigator(
{
    Page1: { screen: Page1}
},
{
    portraitOnlyMode: true
});

참고 URL : https://stackoverflow.com/questions/32176548/how-to-disable-rotation-in-react-native