react-native - 如何在 React Native 上检测平板电脑景观

Question

我希望手机和平板电脑上屏幕 S 的边框边缘不同。平板电脑横向和纵向模式有多种变体。

如何为手机、平板电脑纵向、平板电脑横向上的变体创建不同的边距尺寸？

对于那些好奇如何在 Android 上操作的人，我们只需在正确的文件夹中创建一些资源文件:

• 默认值
• values-sw600dp 适用于平板电脑默认
• values-sw600dp-land 适用于平板电脑景观

Answer 1

其他答案已经解决了屏幕检测任务。然而，仍然存在检测代码是否在平板设备上运行的问题。您可以使用 react-native-device-info 检测到这一点包，特别是其 isTablet 方法。因此，作为示例，在您的组件中:

constructor(){
  super();
  this.state = {orientation: 'UNKNOWN'}
  this._onOrientationChanged = this._onOrientationChanged.bind(this);
}

_onOrientationChanged(orientation){
  this._setState({orientation})
}

componentDidMount(){
  Orientation.addOrientationListener(this._onOrientationChanged);
}
componentWillUnmount(){
  Orientation.removeOrientationListener(this._orientationDidChange);
}

render(){

  let layoutStyles;
  if(DeviceInfo.isTablet()){
    layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeTabletStyle : portraitTabletLandscape; // Basic example, this might get more complex if you account for UNKNOWN or PORTRAITUPSIDEDOWN
  }else{

    layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeStyle : portraitLandscape;
  }

  render(){
     <View style={[styles.container, layoutStyles]} // And so on...
  }
}

请注意，状态一开始就保存着 UNKNOWN 值。看一下包函数的getInitialOrientation()。我故意忽略了这一点，因为它只是读取 JS 代码加载时设置的属性，并且我不确定这是否满足您的用例(即这不是您的第一个屏幕)。我通常喜欢做的是将旋转值存储在 redux 存储中(在其中将方向值初始化为 getInitialOrientation() 的值，然后仅订阅方向监听器一次)。