como desativar a rotação no React Native?

Eu gostaria de oferecer suporte apenas para visualização em retrato. Como posso fazer com que um aplicativo React Native não gire automaticamente? Tentei pesquisar documentação e problemas no Github, mas não encontrei nada útil.

O aplicativo React Native é basicamente um aplicativo iOS normal, então você pode fazer isso exatamente da mesma forma que faria para todos os outros aplicativos. Simplesmente desmarque (no XCode) "Landscape Left" e "Landscape Right" conforme as Orientações do dispositivo permitidas nas propriedades gerais do aplicativo:

Para iOS, a resposta de Jarek é ótima.

Para Android, você precisa editar o arquivo AndroidManifest.xml. Adicione a seguinte linha a cada atividade que você deseja bloquear no modo retrato:

android:screenOrientation="portrait" 

Portanto, um exemplo completo pode ter a seguinte aparência:

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

Veja a lista completa de propriedades screenOrientation disponíveis nos documentos, aqui: https://developer.android.com/guide/topics/manifest/activity-element.html

Atualização de 2017: {"orientation": "portrait"}

Atualmente, muitos guias oficiais do React Native como este recomendam o uso do Expo ao criar aplicativos do React Native, então, além das respostas existentes, também adicionarei uma solução específica da Expo que vale a pena notar porque funciona para iOS e Android e você só precisa configure-o uma vez sem a necessidade de mexer com a configuração do XCode, AndroidManifest.xml etc.

Definir a orientação no momento da construção:

Se você estiver criando seus aplicativos React Native com Expo, poderá usar o orientationcampo em seu app.jsonarquivo - por exemplo:

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

Pode ser definido como "portrait", "landscape"ou o "default"que significa rotação automática sem bloqueio de orientação.

Definir orientação em tempo de execução:

Você também pode substituir essa configuração no tempo de execução executando, por exemplo:

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

onde o argumento pode ser:

• ALL - Todas as 4 orientações possíveis
• ALL_BUT_UPSIDE_DOWN - Todos, exceto o retrato reverso, podem ser todas as 4 orientações em determinados dispositivos Android.
• PORTRAIT - Orientação retrato, também pode ser retrato reverso em certos dispositivos Android.
• PORTRAIT_UP - Somente retrato de cabeça para baixo.
• PORTRAIT_DOWN - Retrato de cabeça para baixo apenas.
• LANDSCAPE - Qualquer orientação de paisagem.
• LANDSCAPE_LEFT - Apenas paisagem esquerda.
• LANDSCAPE_RIGHT - Apenas paisagem certa.

Detectando a rotação:

Quando você permite mais de uma orientação, pode detectar as mudanças ouvindo os changeeventos no Dimensionsobjeto:

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

ou você também pode obter as dimensões a qualquer momento com Dimensions.get('window')e Dimensions.get('screen')assim:

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

ou:

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

Quando você ouve o evento, obtém os dois windowe screenao mesmo tempo, por isso o acessa de maneira diferente.

Documentação:

Para obter mais informações, consulte:

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

Vá para o arquivo Androidmenifest.xml e adicione uma linha: 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 :

Simples, você tem que marcar ou desmarcar o modo de rotação do seu XCODE

Se você usa Expo, pode fazê-lo simplesmente com este código:

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

Coloque-o em App.js antes de renderizar

Todas as opções:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Para Android, você precisa editar o arquivo AndroidManifest.xml. Adicione a seguinte linha a cada atividade que você deseja bloquear no modo retrato:

android: screenOrientation = "retrato"

Portanto, um exemplo completo pode ter a seguinte aparência:

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

Para Android: Em seu arquivo de manifesto, coloque:

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

Então, dentro da tag do aplicativo, coloque:

tools:ignore="LockedOrientationActivity"

E então, em todo o conjunto de atividades:

android:screenOrientation="portrait"

use isso para problemas de orientação de ipad ios que deseja alterar no arquivo 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>

Você pode usar o módulo e a função de bloqueio de orientação reac-nativolockToPortrait() .
Isso pode ser útil se você também gostaria de ter algumas das telas com orientação desbloqueada - neste caso, você também pode usar a unlockAllOrientations()função.

Se você estiver usando o projeto RN expo, e o app contiver navegação reativa, configurar a navegação para o código a seguir me ajudou.

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