कैसे प्रतिक्रिया मूल में रोटेशन को निष्क्रिय करने के लिए?


104

मैं केवल पोर्ट्रेट दृश्य का समर्थन करना चाहूंगा। मैं एक रिएक्टिव नेटिव ऐप को कैसे ऑटोरोटेट नहीं कर सकता हूं? मैंने प्रलेखन और जीथब मुद्दों की खोज करने की कोशिश की, लेकिन मुझे कुछ भी मददगार नहीं लगा।


क्या आप केवल एप्लिकेशन प्रॉपर्टी (किसी अन्य iOS ऐप के साथ) में समर्थित अभिविन्यास सेट नहीं कर सकते?
थिलो

8
Android के बारे में क्या?
ऊलाला

2
इस उत्तर में @oalaala उत्तर stackoverflow.com/questions/34078354/…
मंकीबोनी

नोट: मेरे मोटो 4 पर, मैं sensorPortraitठीक से काम नहीं कर सका । यह कभी भी पोर्ट्रेट (यानी reversePortrait) का समर्थन नहीं करेगा । हालाँकि, fullSensorकाम का उपयोग कर रहा था , लेकिन यह परिदृश्य की अनुमति के भी चेतावनी दी थी। वह मेरे लिए ठीक किया जा रहा समाप्त हो गया लेकिन यदि आप केवल चाहते हैं portraitऔर reversePortrait, आप के साथ अपनी गतिविधि में उन्मुखीकरण परिवर्तन को रोक सकता onConfigurationChangedऔर newConfig.orientationऔर सिर्फ उपेक्षा या ओवरराइड परिदृश्य बदल जाता है।
जोशुआ पिंटर

जवाबों:


133

रिएक्ट नेटिव ऐप बहुत ही सामान्य iOS एप्लिकेशन है, इसलिए आप इसे ठीक उसी तरह से कर सकते हैं जैसे आप अन्य सभी ऐप के लिए करते हैं। सामान्य अनुप्रयोग गुणों में डिवाइस ओरिएंटेशन के रूप में बस "लैंडस्केप लेफ्ट" और "लैंडस्केप राइट" को अनचेक करें।

डिवाइस ओरिएंटेशन


धन्यवाद! एक और सवाल, मैंने जाँच की portraitऔर upside down, लेकिन जब मैंने सिम्युलेटर की स्क्रीन (90 डिग्री पर दो बार) घुमाया तो मेरा ऐप ऑटोरोटेट नहीं था, समस्या क्या है?
16

कोशिश की है कि। IPad (प्रो) सिम्युलेटर पर चलने पर आरएन 34 के साथ काम करना प्रतीत नहीं होता है। हालाँकि, यह iPhone सिम्युलेटर पर काम करते समय होता है। हालांकि मुझे iPad पर काम करने की आवश्यकता है। अजीब।
पद्रम

1
यह बताता है कि मुझे "डिवाइसेस" को iPad के रूप में सेट करने की आवश्यकता है, न कि "यूनिवर्सल" जैसा पहले था। इससे काम बन गया।
पद्रम

श्री @ जेरेक पोटियुक मुझे एक छोटा संदेह है, वास्तव में जब मैं चला गया था तो मेरा सिमुलैटर डिफ़ॉल्ट रूप से लैंडस्केपैमोड दिखाता है, मैंने लैंडस्केपफ़्ट और राइट का उपयोग किया था। लेकिन, इसके उपकरण में लैंडस्केप मोड नहीं दिखा। मैं प्रतिक्रिया देशी अभिविन्यास मॉड्यूल का उपयोग कर रहा हूं और xcode में बाएं और दाएं परिदृश्य का चयन करें। लेकिन, मुझे नहीं मिला
Lavaraju

2
यह अब किसी कारण से काम नहीं करता है। कम से कम नहींreact-native 0.45.1
MattyK14

79

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


2
यह पूरी तरह से काम किया। वीएस कोड का उपयोग करने वाले अन्य लोगों के लाभ के लिए: 'कमांड पैलेट ...' से 'रन एंड्रॉइड ऑन डिवाइस / सिम्युलेटर' निष्पादित करें। डिवाइस को 'रीलोड' करने के लिए हिलाने से ऐप काम नहीं करेगा।
ऋषि

66

2017 अपडेट: {"orientation": "portrait"}

वर्तमान में इस तरह के कई आधिकारिक प्रतिक्रियाशील मूल निवासी मार्गदर्शक एक्सपो नेटिव एप्लिकेशन बनाते समय एक्सपो का उपयोग करने की सलाह देते हैं, इसलिए मौजूदा उत्तरों के अलावा मैं एक एक्सपो-विशिष्ट समाधान भी जोड़ूंगा जो ध्यान देने योग्य है क्योंकि यह आईओएस और एंड्रॉइड दोनों के लिए काम करता है और आपको केवल इसकी आवश्यकता है इसे एक बार XCode config, AndroidManifest.xml आदि के साथ गड़बड़ करने की आवश्यकता नहीं है।

बिल्ड समय पर ओरिएंटेशन सेट करना:

यदि आप एक्सपो के साथ अपने रिएक्टिव नेटिव ऐप बना रहे हैं तो आप orientationअपनी app.jsonफ़ाइल में फ़ील्ड का उपयोग कर सकते हैं - उदाहरण के लिए:

{
  "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
});

या आप भी बस के साथ आयाम कभी भी प्राप्त कर सकते हैं 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इसीलिए आप इसे अलग तरीके से एक्सेस करते हैं।

प्रलेखन:

अधिक जानकारी के लिए देखें:


2
डिवाइस पर एक्सपो बंद करने के बाद काम करता है और फिर से शुरू करता हूं
ब्रैंडन सॉरेन कुली जूल

क्या इसे अलग करने का कोई तरीका है, जैसे Ipad परिदृश्य और Iphone को केवल पोर्ट्रेट की अनुमति देता है?
7urkm3n

यह वह उपाय है जो मेरे मामले में काम करता है। अंतरालीय विज्ञापन बंद करने के बाद मेरा मुख्य दृश्य 180 डिग्री का रोटेशन करता है। इसलिए मुझे एक हार्ड कोडित एक्सपो करना चाहिए।
हरमन श्वार्ज़

15

Answer for disable rotation in React Native.

For Android :

Androidmenifest.xml फ़ाइल पर जाएं और एक पंक्ति जोड़ें: Android: screenOrientation = "पोर्ट्रेट"

         <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 से रोटेशन मोड को चेक या अनचेक करना होगा

यहां छवि विवरण दर्ज करें


2
2020 में सर्वश्रेष्ठ उत्तर, जो कि iOS और Android दोनों को कवर करता है
raulicious

3

यदि आप एक्सपो का उपयोग कर रहे हैं तो आप इसे इस कोड के साथ कर सकते हैं:

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

रेंडर करने से पहले इसे App.js पर रखें

सभी विकल्प:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT


2

Android के लिए, आपको AndroidManifest.xml फ़ाइल संपादित करनी होगी। प्रत्येक गतिविधि जो आप पोर्ट्रेट मोड में लॉक करना चाहते हैं, उसमें निम्न पंक्ति जोड़ें:

एंड्रॉयड: 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>

2

Android के लिए: अपनी मैनिफ़ेस्ट फ़ाइल में:

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

फिर आवेदन टैग के अंदर:

tools:ignore="LockedOrientationActivity"

और फिर सभी गतिविधि सेट में:

android:screenOrientation="portrait"

1

plist फ़ाइल में परिवर्तन करने के लिए ios ipad orientaion मुद्दा अभाव में इस का उपयोग https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

आईओएस:

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

1
किसी समाधान के लिए लिंक का स्वागत है, लेकिन कृपया सुनिश्चित करें कि आपका उत्तर इसके बिना उपयोगी है: लिंक के चारों ओर संदर्भ जोड़ें ताकि आपके साथी उपयोगकर्ताओं को कुछ पता चले कि यह क्या है और यह क्यों है, तो पृष्ठ के सबसे प्रासंगिक भाग को उद्धृत करें ' लक्ष्य पृष्ठ अनुपलब्ध होने की स्थिति में पुनः लिंक करना। ऐसे लिंक जो किसी लिंक से बहुत कम हैं उन्हें हटाया जा सकता है।
डबल बीप

0

आप प्रतिक्रिया-देशी-अभिविन्यास-लॉकर मॉड्यूल और lockToPortrait()फ़ंक्शन का उपयोग कर सकते हैं ।
यह मददगार हो सकता है यदि आप अनलॉक की गई अभिविन्यास वाली कुछ स्क्रीन रखना भी पसंद करेंगे - इस मामले में आप unlockAllOrientations()फ़ंक्शन का उपयोग भी कर सकते हैं ।


-3

यदि आप RN एक्सपो प्रोजेक्ट का उपयोग कर रहे हैं, और एप्लिकेशन में रिएक्शन-नेविगेशन शामिल है, तो निम्नलिखित कोड में नेविगेशन सेट करने से मुझे मदद मिली।

const AppNavigator = createStackNavigator(
{
    Page1: { screen: Page1}
},
{
    portraitOnlyMode: true
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.