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

Question

我想 phone 和平板电脑上屏幕 S 的边框不同。有平板横向和纵向模式的变体。

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

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

默认值
values-sw600dp 平板电脑默认值
values-sw600dp-land for tablet landscape

Answer 1

我认为这个库会对你有所帮助：https://github.com/yamill/react-native-orientation

你可以用它做类似的事情：

Orientation.getOrientation((err,orientation)=> {
    console.log("Current Device Orientation: ", orientation);

    if(orientation === 'LANDSCAPE') {
      //do stuff
    } else {
      //do other stuff
    }

});

Answer 2

    // Extract from the root element in our app's index.js

class App extends Component {
  _onLayout = event => this.props.appLayout(event.nativeEvent.layout);

  render() {
    return (
      <View onLayout={this._onLayout}>
        {/* Subviews... */}
      </View>
    );
  }
}



  export const SET_ORIENTATION = 'deviceStatus/SET_ORIENTATION';
  export function appLayout(event: {width:number,    height:number}):StoreAction {
  const { width, height } = event;
  const orientation = (width > height) ? 'LANDSCAPE' : 'PORTRAIT';
  return { type: SET_ORIENTATION, payload: orientation };
}

代码复制自Here

Answer 3

其他答案已经解决了屏幕检测任务。但是，在平板设备上仍然存在检测代码是否为运行的问题。您可以使用 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() 的方向值，然后只订阅一次方向侦听器）。

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

How detect tablet landscape on React Native

react-native

react-native-android