React Native'de döndürme nasıl devre dışı bırakılır?

Yalnızca portre görünümünü desteklemek istiyorum. Bir React Native uygulamasının otomatik olarak döndürülmemesini nasıl sağlayabilirim? Belgeleri ve Github sorunlarını aramayı denedim, ancak yararlı bir şey bulamadım.

React Native uygulaması hemen hemen normal bir iOS uygulamasıdır, bu nedenle bunu diğer tüm uygulamalar için yaptığınız gibi yapabilirsiniz. Genel uygulama özelliklerinde izin verilen Cihaz Yönlendirmeleri'nde "Yatay Sol" ve "Sağa Yatay" öğelerinin işaretini kaldırmanız (XCode'da) yeterlidir:

İOS için Jarek'in cevabı harika.

Android için, AndroidManifest.xml dosyasını düzenlemeniz gerekir. Dikey moda kilitlemek istediğiniz her aktiviteye aşağıdaki satırı ekleyin:

android:screenOrientation="portrait" 

Dolayısıyla, tam bir örnek şöyle görünebilir:

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

Belgelerdeki mevcut screenOrientation özelliklerinin tam listesine buradan bakın: https://developer.android.com/guide/topics/manifest/activity-element.html

2017 Güncellemesi: {"orientation": "portrait"}

Şu anda bunun gibi birçok resmi React Native kılavuzu , React Native uygulamaları oluştururken Expo'nun kullanılmasını önermektedir, bu nedenle mevcut yanıtlara ek olarak, hem iOS hem de Android için çalıştığı için dikkate değer olan Expo'ya özgü bir çözüm de ekleyeceğim ve yalnızca yapmanız gereken XCode config, AndroidManifest.xml vb. ile uğraşmaya gerek kalmadan bir kez ayarlayın.

Derleme zamanında yön ayarlama:

React Native uygulamalarınızı Expo ile oluşturuyorsanız orientation, app.jsondosyanızdaki alanı kullanabilirsiniz - örneğin:

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

Bu şekilde ayarlanabilir "portrait", "landscape"veya "default"hangi hayır demektir yön kilidi ile AutoRotate için.

Çalışma zamanında oryantasyonu ayarlama:

Ayrıca bu ayarı çalışma zamanında çalıştırarak geçersiz kılabilirsiniz, örneğin:

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

argüman nerede olabilir:

• ALL - 4 olası yönelim
• ALL_BUT_UPSIDE_DOWN - Ters portre hariç tümü, belirli Android cihazlarda 4 yönün tamamı olabilir.
• PORTRAIT - Dikey yönlendirme, belirli Android cihazlarda ters dikey de olabilir.
• PORTRAIT_UP - Yalnızca üst dikey.
• PORTRAIT_DOWN - Yalnızca baş aşağı dikey.
• LANDSCAPE - Herhangi bir yatay yönlendirme.
• LANDSCAPE_LEFT - Yalnızca sol manzara.
• LANDSCAPE_RIGHT - Yalnızca doğru manzara.

Dönüşün algılanması:

Birden fazla yönlendirmeye izin verdiğinizde change, Dimensionsnesnedeki olayları dinleyerek değişiklikleri tespit edebilirsiniz :

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

ya da sadece birlikte boyutlar her zaman alabilir Dimensions.get('window')ve Dimensions.get('screen')bunun gibi:

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

veya:

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

Etkinliğe dinlemek zaman hem olsun windowve screenfarklı şekilde erişmek niçin aynı anda o yüzden.

Dokümantasyon:

Daha fazla bilgi için bkz .:

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

Androidmenifest.xml dosyasına gidin ve bir satır ekleyin: 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'unuzdan döndürme modunu kontrol etmeniz veya işaretini kaldırmanız basit

Expo kullanıyorsanız, bunu basitçe bu kodla yapabilirsiniz:

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

Oluşturmadan önce bunu App.js'ye koyun

Tüm seçenekler:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Android için, AndroidManifest.xml dosyasını düzenlemeniz gerekir. Dikey moda kilitlemek istediğiniz her aktiviteye aşağıdaki satırı ekleyin:

android: screenOrientation = "portre"

Dolayısıyla, tam bir örnek şöyle görünebilir:

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

Android için: Manifest dosyanıza şunu koyun:

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

Ardından uygulama etiketinin içine şunu koyun:

tools:ignore="LockedOrientationActivity"

Ve sonra tüm aktivite setinde:

android:screenOrientation="portrait"

ios ipad orientaion sorunu için bunu kullanın plist dosyasında değiştirmek istiyorum https://www.reddit.com/r/reactnative/comments/7vkrfp/disoking_screen_rotate_in_react_native_both/

İOS:

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

Kullanabilirsiniz reaksiyona natif yönlendirme-dolap modülünü ve lockToPortrait()bir işlev.
Bu, bazı ekranların kilidi açılmış yöne sahip olmasını istiyorsanız yararlı olabilir - bu durumda unlockAllOrientations()işlevi de kullanabilirsiniz .

RN expo projesini kullanıyorsanız ve uygulama react-navigation içeriyorsa, navigasyonu aşağıdaki koda ayarlamak bana yardımcı oldu.

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