bagaimana cara menonaktifkan rotasi di React Native?

Saya hanya ingin mendukung tampilan potret. Bagaimana cara membuat aplikasi React Native tidak melakukan rotasi otomatis? Saya mencoba mencari dokumentasi dan masalah Github, tetapi saya tidak menemukan apa pun yang membantu.

Aplikasi React Native adalah aplikasi iOS biasa, jadi Anda dapat melakukannya dengan cara yang persis sama seperti yang Anda lakukan untuk semua aplikasi lain. Cukup hapus centang (di XCode) "Lanskap Kiri" dan "Lanskap Kanan" sebagaimana diizinkan Orientasi Perangkat di properti aplikasi Umum:

Untuk iOS, jawaban Jarek bagus.

Untuk Android, Anda perlu mengedit file AndroidManifest.xml. Tambahkan baris berikut ke setiap aktivitas yang ingin Anda kunci ke mode potret:

android:screenOrientation="portrait" 

Jadi, contoh lengkapnya mungkin terlihat seperti ini:

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

Lihat daftar lengkap properti screenOrientation yang tersedia di dokumen, di sini: https://developer.android.com/guide/topics/manifest/activity-element.html

Pembaruan 2017: {"orientation": "portrait"}

Saat ini banyak panduan resmi React Native seperti ini yang merekomendasikan penggunaan Expo saat membuat aplikasi React Native jadi selain jawaban yang ada, saya juga akan menambahkan solusi khusus Expo yang perlu diperhatikan karena berfungsi untuk iOS dan Android dan Anda hanya perlu setel sekali tanpa perlu mengacaukan konfigurasi XCode, AndroidManifest.xml, dll.

Mengatur orientasi pada waktu pembuatan:

Jika Anda membuat aplikasi React Native dengan Expo, Anda dapat menggunakan kolom orientationdi app.jsonfile Anda - misalnya:

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

Dapat disetel ke "portrait", "landscape"atau "default"yang artinya rotasi otomatis tanpa kunci orientasi.

Mengatur orientasi saat runtime:

Anda juga dapat mengganti pengaturan itu pada waktu proses dengan menjalankan, misalnya:

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

dimana argumennya bisa:

• ALL - Semua 4 kemungkinan orientasi
• ALL_BUT_UPSIDE_DOWN - Semua kecuali potret terbalik, bisa jadi semua 4 orientasi pada perangkat Android tertentu.
• PORTRAIT - Orientasi potret, bisa juga potret terbalik pada perangkat Android tertentu.
• PORTRAIT_UP - Potret terbalik saja.
• PORTRAIT_DOWN - Hanya potret terbalik.
• LANDSCAPE - Semua orientasi lanskap.
• LANDSCAPE_LEFT - Hanya lanskap kiri.
• LANDSCAPE_RIGHT - Pemandangan yang tepat saja.

Mendeteksi rotasi:

Jika Anda mengizinkan lebih dari satu orientasi, Anda dapat mendeteksi perubahan dengan mendengarkan changekejadian pada Dimensionsobjek:

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

atau Anda juga bisa mendapatkan dimensi kapan saja dengan Dimensions.get('window')dan Dimensions.get('screen')seperti ini:

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

atau:

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

Ketika Anda mendengarkan acara, Anda mendapatkan keduanya windowdan screenpada saat yang sama sehingga Anda mengaksesnya secara berbeda.

Dokumentasi:

Untuk info lebih lanjut lihat:

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

Buka file Androidmenifest.xml dan tambahkan satu baris: 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 :

Sederhana, Anda harus memeriksa atau menghapus centang mode rotasi dari XCODE Anda

Jika Anda menggunakan Expo, Anda dapat melakukannya hanya dengan kode ini:

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

Taruh di App.js sebelum render

Semua opsi:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Untuk Android, Anda perlu mengedit file AndroidManifest.xml. Tambahkan baris berikut ke setiap aktivitas yang ingin Anda kunci ke mode potret:

android: screenOrientation = "portrait"

Jadi, contoh lengkapnya mungkin terlihat seperti ini:

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

Untuk Android: Dalam file manifes Anda, letakkan:

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

Kemudian di dalam tag aplikasi, letakkan:

tools:ignore="LockedOrientationActivity"

Dan kemudian di semua set aktivitas:

android:screenOrientation="portrait"

gunakan ini untuk masalah orientasi ios ipad ingin mengubah file 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>

Anda dapat menggunakan modul dan fungsi react-native-orientasi-lockerlockToPortrait() .
Ini dapat membantu jika Anda juga ingin memiliki beberapa layar dengan orientasi tidak terkunci - dalam hal ini Anda juga dapat menggunakan unlockAllOrientations()fungsi.

Jika Anda menggunakan proyek RN expo, dan aplikasi berisi navigasi-reaksi, maka pengaturan navigasi ke kode berikut membantu saya.

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