如何检测React Native上的平板电脑风景

时间:2016-12-21 17:23:01

标签: react-native react-native-android

我想在手机和平​​板电脑上屏幕S的边界边缘不同。平板电脑横向和纵向模式有变种。

如何为手机,平板电脑肖像,平板电脑风景中的变体创建不同的边距尺寸?

对于那些好奇的Android操作方法,我们只需在右侧文件夹中创建一些资源文件:

    默认
  • 平板电脑默认
  • values-sw600dp
  • 平板电脑风景的
  • values-sw600dp-land

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

我认为这个图书馆会对您有所帮助: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
    }

});

答案 2 :(得分:0)

    // 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

复制的代码