วิธีปิดการหมุนใน React Native

ฉันต้องการสนับสนุนเฉพาะมุมมองแนวตั้งเท่านั้น ฉันจะสร้างแอป React Native ไม่ให้หมุนอัตโนมัติได้อย่างไร ฉันพยายามค้นหาเอกสารและปัญหา Github แต่ไม่พบสิ่งใดที่เป็นประโยชน์

แอป React Native เป็นเพียงแอปพลิเคชัน iOS ทั่วไปดังนั้นคุณสามารถทำได้ในลักษณะเดียวกับที่คุณทำกับแอปอื่น ๆ ทั้งหมด เพียงแค่ยกเลิกการเลือก (ใน XCode) "แนวนอนด้านซ้าย" และ "แนวนอนขวา" ตามที่อนุญาตการวางแนวอุปกรณ์ในคุณสมบัติแอปพลิเคชันทั่วไป:

สำหรับ 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"}

ปัจจุบันคำแนะนำ React Native อย่างเป็นทางการจำนวนมากเช่นนี้แนะนำให้ใช้ Expo เมื่อสร้างแอป React Native ดังนั้นนอกเหนือจากคำตอบที่มีอยู่แล้วฉันยังจะเพิ่มโซลูชันเฉพาะงาน Expo ซึ่งเป็นที่น่าสังเกตเพราะใช้ได้กับทั้ง iOS และ Android และคุณจะต้องทำเท่านั้น ตั้งค่าได้ครั้งเดียวโดยไม่ต้องวุ่นวายกับ XCode config, AndroidManifest.xml เป็นต้น

การตั้งค่าการวางแนวในเวลาสร้าง:

หากคุณกำลังสร้างแอป React Native ด้วย Expo คุณสามารถใช้orientationฟิลด์ในapp.jsonไฟล์ของคุณได้ตัวอย่างเช่น:

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

มันสามารถตั้งค่าให้"portrait", "landscape"หรือ"default"ซึ่งหมายถึงการที่มีการล็อค autorotate ปฐมนิเทศไม่มี

การตั้งค่าการวางแนวที่รันไทม์:

คุณยังสามารถแทนที่การตั้งค่านั้นในรันไทม์ได้ด้วยการรันตัวอย่างเช่น:

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

โดยที่อาร์กิวเมนต์สามารถ:

• ALL - ทั้ง 4 ทิศทางที่เป็นไปได้
• ALL_BUT_UPSIDE_DOWN - ทั้งหมดยกเว้นแนวตั้งย้อนกลับอาจเป็นได้ทั้ง 4 ทิศทางบนอุปกรณ์ Android บางรุ่น
• 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
});

หรือคุณยังสามารถเพียงแค่ได้รับมิติทุกเวลาด้วย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 :

ไปที่ไฟล์ Androidmenifest.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 ของคุณ

หากคุณใช้งาน 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

สำหรับ Android คุณต้องแก้ไขไฟล์ AndroidManifest.xml เพิ่มบรรทัดต่อไปนี้ในแต่ละกิจกรรมที่คุณต้องการล็อกเข้าสู่โหมดแนวตั้ง:

android: screenOrientation = "แนวตั้ง"

ตัวอย่างเต็มอาจมีลักษณะดังนี้:

 <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: ในไฟล์รายการของคุณใส่:

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

จากนั้นภายในแท็กแอปพลิเคชันให้ใส่:

tools:ignore="LockedOrientationActivity"

จากนั้นในชุดกิจกรรมทั้งหมด:

android:screenOrientation="portrait"

ใช้สิ่งนี้สำหรับปัญหา ios ipad orientaion ต้องการเปลี่ยนในไฟล์ 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>

คุณสามารถใช้โมดูลและฟังก์ชันการตอบสนองแบบเนทีฟ - ปฐมนิเทศล็อกเกอร์ สิ่งนี้จะมีประโยชน์หากคุณต้องการให้หน้าจอบางส่วนมีการวางแนวแบบปลดล็อก - ในกรณีนี้คุณสามารถใช้ฟังก์ชันได้เช่นกันlockToPortrait()
unlockAllOrientations()

หากคุณกำลังใช้โครงการ RN expo และแอปมีการนำทางแบบตอบสนองการตั้งค่าการนำทางไปยังรหัสต่อไปนี้ช่วยฉันได้

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