我想在手机和平板电脑上屏幕S的边界边缘不同。平板电脑横向和纵向模式有变种。
如何为手机,平板电脑肖像,平板电脑风景中的变体创建不同的边距尺寸?
对于那些好奇的Android操作方法,我们只需在右侧文件夹中创建一些资源文件:
答案 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
复制的代码