Question

我正在使用RNN2，我需要将Android上的方向锁定为纵向。通常在传统的android应用中，它是通过manifest.xml中的android：screenOrientation =“ portrait”完成的，但是当我使用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/#/docs/options-migration?id=orientation

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'],
          },
        }
      }
    }
  }
}});

Wix React Native Navigation V2，如何在Android上锁定方向肖像

3 个答案: