làm cách nào để tắt xoay vòng trong React Native?

Tôi chỉ muốn hỗ trợ chế độ xem chân dung. Làm cách nào để tạo một ứng dụng React Native không tự động chạy? Tôi đã thử tìm kiếm tài liệu và các vấn đề trên Github, nhưng tôi không tìm thấy bất kỳ điều gì hữu ích.

Ứng dụng React Native gần như chỉ là một ứng dụng iOS bình thường, vì vậy bạn có thể làm điều đó theo cách giống hệt như cách làm với tất cả các ứng dụng khác. Chỉ cần bỏ chọn (trong XCode) "Ngang trái" và "Ngang phải" như Hướng thiết bị được phép trong thuộc tính ứng dụng Chung:

Đối với iOS, câu trả lời của Jarek là rất tốt.

Đối với Android, bạn cần chỉnh sửa tệp AndroidManifest.xml. Thêm dòng sau vào từng hoạt động mà bạn muốn khóa ở chế độ dọc:

android:screenOrientation="portrait" 

Vì vậy, một ví dụ đầy đủ có thể trông như thế này:

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

Xem danh sách đầy đủ các thuộc tính screenOrientation có sẵn trong tài liệu, tại đây: https://developer.android.com/guide/topics/manifest/activity-element.html

Cập nhật năm 2017: {"orientation": "portrait"}

Hiện tại, nhiều hướng dẫn chính thức về React Native như hướng dẫn này khuyên bạn nên sử dụng Expo khi xây dựng ứng dụng React Native, vì vậy ngoài các câu trả lời hiện có, tôi cũng sẽ thêm một giải pháp dành riêng cho Expo đáng chú ý vì nó hoạt động cho cả iOS và Android và bạn chỉ cần đặt nó một lần mà không cần phải gây rối với cấu hình XCode, AndroidManifest.xml, v.v.

Đặt định hướng tại thời điểm xây dựng:

Nếu bạn đang xây dựng ứng dụng React Native bằng Expo thì bạn có thể sử dụng orientationtrường trong app.jsontệp của mình - ví dụ:

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

Nó có thể được đặt thành "portrait", "landscape"hoặc "default"có nghĩa là tự động xoay mà không có khóa định hướng.

Đặt định hướng trong thời gian chạy:

Bạn cũng có thể ghi đè cài đặt đó trong thời gian chạy bằng cách chạy, ví dụ:

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

nơi đối số có thể là:

• ALL - Tất cả 4 hướng có thể
• ALL_BUT_UPSIDE_DOWN - Tất cả trừ dọc ngược, có thể là cả 4 hướng trên các thiết bị Android nhất định.
• PORTRAIT - Hướng dọc, cũng có thể là dọc ngược trên một số thiết bị Android.
• PORTRAIT_UP - Chỉ ảnh chân dung ngược.
• PORTRAIT_DOWN - Chỉ ảnh chân dung lộn ngược.
• LANDSCAPE - Bất kỳ hướng cảnh quan nào.
• LANDSCAPE_LEFT - Chỉ còn lại phong cảnh.
• LANDSCAPE_RIGHT - Đúng cảnh quan.

Phát hiện vòng quay:

Khi bạn cho phép nhiều hơn một hướng thì bạn có thể phát hiện các thay đổi bằng cách lắng nghe các changesự kiện trên Dimensionsđối tượng:

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

hoặc bạn cũng có thể chỉ nhận các thứ nguyên bất cứ lúc nào với Dimensions.get('window')và Dimensions.get('screen')như thế này:

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

hoặc là:

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

Khi bạn lắng nghe sự kiện, bạn nhận được cả hai windowvà screencùng một lúc, đó là lý do tại sao bạn truy cập nó theo cách khác.

Tài liệu:

Để biết thêm thông tin, hãy xem:

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

Đi tới tệp Androidmenifest.xml và thêm một dòng: android: screenOrientation = "chân dung"

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

Đơn giản, bạn phải kiểm tra hoặc bỏ chọn chế độ xoay từ XCODE của mình

Nếu bạn sử dụng Expo, bạn có thể làm điều đó đơn giản với mã này:

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

Đặt nó trên App.js trước khi kết xuất

Tất cả các tùy chọn:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Đối với Android, bạn cần chỉnh sửa tệp AndroidManifest.xml. Thêm dòng sau vào từng hoạt động mà bạn muốn khóa ở chế độ dọc:

android: screenOrientation = "chân dung"

Vì vậy, một ví dụ đầy đủ có thể trông như thế này:

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

Đối với Android: Trong tệp kê khai của bạn đặt:

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

Sau đó, bên trong thẻ ứng dụng đặt:

tools:ignore="LockedOrientationActivity"

Và sau đó trong tất cả các tập hợp hoạt động:

android:screenOrientation="portrait"

sử dụng cái này cho ios ipad orientaion vấn đề muốn thay đổi trong tệp 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>

Bạn có thể sử dụng mô-đun và chức năng react-native-direction-lockerlockToPortrait() .
Điều này có thể hữu ích nếu bạn cũng muốn có một số màn hình có hướng mở khóa - trong trường hợp này, bạn cũng có thể sử dụngunlockAllOrientations() chức năng.

Nếu bạn đang sử dụng dự án RN expo và ứng dụng chứa điều hướng phản ứng, thì việc thiết lập điều hướng theo mã sau đã giúp tôi.

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