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

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

세로 보기만 지원하고 싶습니다.자동 회전하지 않도록 리액트 네이티브 앱을 만들려면 어떻게 해야 합니까?설명서와 Github 문제를 검색해 보았지만 도움이 되는 것을 찾지 못했습니다.

리액트 네이티브 앱은 거의 일반적인 iOS 앱이므로 다른 모든 앱과 동일한 방식으로 수행할 수 있습니다.일반 응용 프로그램 속성에서 허용된 장치 방향으로 "Landscape Left" 및 "Landscape Right"를 선택 취소하기만 하면 됩니다.

iOS의 경우, Jarek의 답변은 훌륭합니다.

Android의 경우 AndroidManifest.xml 파일을 편집해야 합니다.세로 모드로 잠그려는 각 활동에 다음 행을 추가합니다.

android:screenOrientation="portrait" 

따라서 전체 예는 다음과 같습니다.

      <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>

다음 문서에서 사용 가능한 화면 방향 속성의 전체 목록을 확인하십시오. https://developer.android.com/guide/topics/manifest/activity-element.html

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

현재 이와 같은 많은 공식 리액트 네이티브 가이드는 리액트 네이티브 앱을 구축할 때 Expo를 사용할 것을 권장하므로 기존 답변 외에도 iOS와 Android 모두에서 작동하고 XCode 구성, Android Manifest.xml 등을 방해하지 않고 한 번만 설정하면 되므로 주목할 만한 Expo 전용 솔루션을 추가합니다.

빌드 시간에 방향 설정:

Expo를 사용하여 React Native 앱을 구축하는 경우 다음을 사용할 수 있습니다.orientation의 필드app.jsonfile - 예:

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

로 설정할 수 있습니다."portrait","landscape"또는"default"즉, 방향 잠금 없이 자동으로 회전합니다.

런타임에 방향 설정:

실행 시 다음과 같이 실행하여 해당 설정을 재정의할 수도 있습니다.

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

여기서 인수는 다음과 같습니다.

• ALL가능한 4가지 방향 모두
• ALL_BUT_UPSIDE_DOWN특정 Android 장치에서는 역방향 초상을 제외한 모든 것이 4개의 방향일 수 있습니다.
• PORTRAIT세로 방향은 특정 Android 장치에서 반대로 세로 방향일 수도 있습니다.
• PORTRAIT_UP위쪽 초상화만.
• PORTRAIT_DOWN거꾸로 된 초상화만 있습니다.
• LANDSCAPE임의의 가로 방향.
• LANDSCAPE_LEFT왼쪽 가로만.
• LANDSCAPE_RIGHT오른쪽 풍경만 해당.

회전 감지:

두 개 이상의 방향을 허용할 경우 다음을 들어 변경 사항을 감지할 수 있습니다.change의건사의 Dimensions객체:

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

또언제치얻수있을습다니수를지는든▁with로 언제든지 치수를 알 수 있습니다.Dimensions.get('window')그리고.Dimensions.get('screen')다음과 같이:

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

또는:

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

당신이 그 사건을 들을 때 당신은 둘 다 얻습니다.window그리고.screen동시에 액세스하는 방법이 다릅니다.

설명서:

자세한 내용은 다음을 참조하십시오.

• 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

Answer for disable rotation in React Native.

For Android :

로 AndroidManifest.xml파일을 작성하고 한 줄 추가: Android:screenOrientation="portrait"

         <activity
            android:name=".MainActivity"

            android:screenOrientation="portrait"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

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

For IOS :

XCODE에서 회전 모드를 선택하거나 선택 취소해야 합니다.

Android의 경우:매니페스트 파일에 다음을 입력합니다.

xmlns:tools="http://schemas.android.com/tools"

그런 다음 응용 프로그램 태그 안에 다음을 넣습니다.

tools:ignore="LockedOrientationActivity"

그리고 모든 활동 집합에서:

android:screenOrientation="portrait"

Android의 경우 AndroidManifest.xml 파일을 편집해야 합니다.세로 모드로 잠그려는 각 활동에 다음 행을 추가합니다.

Android:화면 방향="세로"

따라서 전체 예는 다음과 같습니다.

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">

  <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>

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

반응 탐색을 사용하는 경우 간단히 통과할 수 있습니다.

screenOptions={{ orientation: 'portrait'}}

Expo를 사용하는 경우 다음 코드로 간단히 수행할 수 있습니다.

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

렌더링하기 전에 App.js에 저장

모든 옵션:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

react-native-orientation-locker 모듈을 사용할 수 있습니다.lockToPortrait()기능.
이 해제된 이 될 수 - 이에는 이기은잠해방원경유화우용다니합. 있도사수용할다습니이에경우하도에는면능을이금향제된의▁with▁use다▁this있니▁also▁screens습수▁orient▁couldation▁in▁can이▁-▁unlocked▁some▁of▁if▁you▁this▁the▁you▁like▁helpful▁be를 사용할 수도 있습니다.unlockAllOrientations()기능.

ios ipad 오리엔테이션 문제에 사용합니다. plist 파일 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>

Android를 추가합니다. AndroidManifest.xml 파일을 합니다.android:screenOrientation="portrait"활동 태그에 대한 코드는 그렇게 되어야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="portrait" 
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

만약 당신이 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