Wix React Native Navigation V2, как заблокировать ориентацию портрета на Android

Question

Я использую RNN2 и мне нужно заблокировать ориентацию на Android для портрета. Обычно в традиционном приложении для Android это делается с помощью android:screenOrientation = "Portrait" в manifest.xml, но когда я настроил экраны с RNN2, это не работает.

Любая помощь будет оценена.

Answer 1

С RNN2 вам нужно сделать это, добавив опцию макета:

макет: {ориентация: ['портрет' ] }

В версии 1 было сделано с

appStyle: {ориентация: 'портрет'}

Вот полный пример использования v2:

Navigation.setRoot({
    root: {
        stack: {
            children: [
                {
                    component: {
                        name: 'Login',
                        options: {
                            topBar: {
                                title: {
                                    text: 'Login'
                                }
                            }

                        }
                    }
                }
            ],
        },
    },
    layout: {
        orientation: ['portrait']
    }
});

Любые дополнительные сомнения вы можете проверить в официальной документации: https://wix.github.io/react-native-navigation/

Answer 2

Единственный способ, которым я справился с этой задачей, - это добавить приведенный ниже код в optionsкаждого компонента экрана. Несмотря на то, что типы позволяют указывать макет для стеков и нижних вкладок, кажется, что он работает только с параметрами самих компонентов. По крайней мере, на 2.19 и 2.23, где я пробовал.

export class MyScreen extends Component<Props, State> {
  static options = (): Options => ({
    topBar: {
      visible: false,
      drawBehind: true,
    },
    statusBar: {
      style: 'light',
    },
    layout: {
      orientation: ['portrait'],
    },
  })

РЕДАКТИРОВАТЬ

его также можно установить по умолчанию следующим образом:

    Navigation.setDefaultOptions({
      layout: { orientation: ['portrait'] },
    })

Answer 3

У меня есть один экран с боковым ящиком, и я заставил его работать во всем приложении, добавив макет к параметрам центрального экрана, а не корня:

Navigation.setRoot({
root: {
  sideMenu: {
    id: 'sideMenu',
    left: {
      component: {
        id: 'SideDrawer',
        name: 'yourApp.SideDrawer',
      },
      visible:true,
    },
    center: {
      stack: {
        id: 'App',
        children: [{
          component: {
            id: 'HomeScreen',
            name: 'yourApp.HomeScreen',
            options:{
              topBar: {
                leftButtons: [
                  {
                    text:'Menu',
                    id: 'sideDrawerToggle',
                    active: true,
                    visible: true,
                    display: true,
                  }
                ],
                background: {
                  color: '#000',
                  },
                title: {
                  text: 'Your App',
                  fontSize: 18,
                  color: '#fff',
                  fontFamily: 'Helvetica',
                  fontWeight: 'bold', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
                },
              },
            }
          },
        }],
        options:{
          topBar: {
            background: {
              color: '#000',
              },
            title: {
              fontSize: 18,
              color: '#fff',
              fontFamily: 'Helvetica',
              fontWeight: 'bold', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
            },
            backButton: {
              visible: true,
              color:'#fff'
            },
          },
          //add layout here
          layout: {
            orientation: ['portrait'],
          },
        }
      }
    }
  }
}});