ios - 根据 SplashScreen 方向而不是当前方向，React Native 中的 Dimension.get ('window'.width？

Question

我正在将一个 React Native 应用程序从 iPhone 适配到 iPad，但我遇到了一个奇怪的问题。我怀疑 RN 有错误。当用户处于横向模式并启动应用程序时，它会在横向模式下出现启动画面，这没有问题。但是即使在我将屏幕锁定为纵向后，该应用程序仍将 Dimensions.get('window').width 识别为横向模式宽度的宽度。

我的应用程序结构是这样的。应用的母组件有一段代码可以将应用锁定为纵向模式，如下所示:

var Orientation = require('react-native').NativeModules.Orientation;

componentWillMount(){
    Orientation.lockToPortrait();
}

从该初始组件，其他组件通过路由器 react-native-router-flux 加载。在这些组件中，UI 组件使用 React Native Dimensions API 进行样式化。像这样:

<View style={{ width: Dimensions.get('window').width - 10}} />

它在 iPhone 上完美运行，因为 iPhone 在应用程序启动期间始终处于纵向模式。但是在 iPad 上，当用户的屏幕处于横向模式时(在应用程序启动期间)，整个应用程序看起来很奇怪，因为 RN 将屏幕高度重新调整为屏幕宽度。当用户在纵向模式下启动应用程序时，不会发生同样的问题。它不应该发生，因为 Dimensions.get('window').width 在应用程序已经锁定为纵向后立即被调用。这对我来说毫无意义......

不幸的是，我真的也需要能够拥有横向模式，因为在某些屏幕中，我通过执行 Orientation.lockToLandscape()

强制用户处于横向模式

这个问题有什么解决办法吗？

Answer 1

为了让我的应用快速运行，我想出了一个 hack，但我认为这不是最好的方法。我基本上测量屏幕以了解我的应用程序在哪个方向被锁定。像这样:

const getWidth = (percentage: number) => {
  if (Dimensions.get('window').width > Dimensions.get('window').height) {
    return (Dimensions.get('window').height * percentage) / 100;
  }
  return (Dimensions.get('window').width * percentage) / 100;
};

const getHeight = (percentage: number) => {
  if (Dimensions.get('window').width > Dimensions.get('window').height) {
    return (Dimensions.get('window').width * percentage) / 100;
  }
  return (Dimensions.get('window').height * percentage) / 100;
};

之后，我可以创建适应屏幕方向的 Stylesheet.create() 对象。像这样:

StyleSheet.create({
fullWidth: {
    width: getWidth(100) - 60,
  }
})

代替:

StyleSheet.create({
fullWidth: {
    width: Dimensions.get('window').width - 60,
  }
})