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

为了使我的应用程序快速运行，我提出了一个建议，但我认为这不是最好的方法。我基本上会测量屏幕，以了解我的应用锁定了哪个方向。像这样：

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,
  }
})

Answer 2

我根据pedrosimao答案使用了此替代方法：

   Dimensions.addEventListener('change', e => {
  const{width,height}=(e.window)

  const getHeight = (percentage) => {
    if (width > height) {

      this.setState({orientation:'landscape'})
      return ((height * percentage) / 100)
    }else{

      this.setState({orientation:'portrait'})
    }


    return height
  }
  this.setState({width:width,height:height,height2:getHeight(50)})
});

当然，如果您至少一次没有改变方向，这是行不通的。您必须使用这样的一些初始状态：

         this.state={
           height2:   (Dimensions.get('window').height>Dimensions.get('window').width) ? Dimensions.get('window').height :(Dimensions.get('window').height*50)/100  ,


  }

根据SplashScreen方向而不是当前方向在React Native中是Dimension.get（'window'）。width？

2 个答案: