[英]How to changing layout based on screen size with react
I want to be able to change my layout when i hit a given screen size so i can change the way my site looks when it hits a mobile view. 我希望能够在遇到给定的屏幕尺寸时更改其布局,以便可以更改其网站在移动视图中的显示方式。
Currently my react site scrolls horizontally using the package Horitzontal Scroll Package 目前,我的反应站点使用Horitzontal Scroll Package进行水平滚动
I've tried implementing this with the react-responsive package which allows me to run media queries but there seems to be a conflict between the two packages. 我尝试使用react-response包实现此功能,该包允许我运行媒体查询,但是两个包之间似乎存在冲突。
So i want my site to scroll horizontal when in full screen (Desktop and table) and then scroll top to bottom in mobile view. 所以我希望我的网站在全屏(桌面和表格)中水平滚动,然后在移动视图中从上到下滚动。 How would i do this?
我该怎么办?
class Home extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
this.setState({
home: projectsData.filter( p => p.name === "homepage" ),
galleryImages: [
ImgOne,
ImgTwo,
ImgThree,
ImgFour,
ImgFive,
ImgSix
]
});
}
render(){
const test = { color: "black", position: "fixed" }
return(
<div className="row">
<Responsive minWidth={992}>
<HorizontalScroll reverseScroll={true}>
<Header />
<SplashScreen />
<CopyText />
</HorizontalScroll>
</Responsive>
</div>
);
}
}
NOTE: I know that the horizontal-scroll package doesn't support sizing with percentages. 注意:我知道水平滚动包不支持按百分比调整大小。
You can use Material UI <Hidden>
component. 您可以使用Material UI
<Hidden>
组件。
import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Hidden from '@material-ui/core/Hidden';
import withWidth from '@material-ui/core/withWidth';
import Typography from '@material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1,
},
container: {
display: 'flex',
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
flex: '1 0 auto',
margin: theme.spacing.unit,
},
});
function BreakpointUp(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Typography variant="subtitle1">Current width: {props.width}</Typography>
<div className={classes.container}>
<Hidden xsUp>
<Paper className={classes.paper}>xsUp</Paper>
</Hidden>
<Hidden smUp>
<Paper className={classes.paper}>smUp</Paper>
</Hidden>
<Hidden mdUp>
<Paper className={classes.paper}>mdUp</Paper>
</Hidden>
<Hidden lgUp>
<Paper className={classes.paper}>lgUp</Paper>
</Hidden>
<Hidden xlUp>
<Paper className={classes.paper}>xlUp</Paper>
</Hidden>
</div>
</div>
);
}
BreakpointUp.propTypes = {
classes: PropTypes.object.isRequired,
width: PropTypes.string.isRequired,
};
export default compose(
withStyles(styles),
withWidth(),
)(BreakpointUp);
I recommend looking into Media Queries. 我建议调查媒体查询。 Here is a short video to show you the basics.
这是一个简短的视频,向您展示基本知识。
You can set a threshold that will trigger separate styles under those conditions. 您可以设置一个阈值,在这些条件下将触发单独的样式。 It can be very useful when you want your UI to do something different at different sizes.
当您希望用户界面以不同的大小执行不同的操作时,此功能非常有用。
@media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
I am not familiar with the HorizontalScroll component, but I can give you a code example of how to change layout based on screen size with React. 我不熟悉HorizontalScroll组件,但是我可以给你一个代码示例,说明如何使用React根据屏幕大小更改布局。
class WindowWidth extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onResize = this.onResize.bind(this);
}
render() {
return this.props.children({ width: this.state.width });
}
getWindowWidth() {
return Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);
}
onResize() {
window.requestAnimationFrame(() => {
this.setState({
width: this.getWindowWidth()
});
});
}
componentWillMount() {
this.setState({
width: this.getWindowWidth()
});
}
componentDidMount() {
window.addEventListener("resize", this.onResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.onResize);
}
}
const Vertical = props => <div> Vertical component: {props.children}</div>;
const Horizontal = props => <div> Horizontal component: {props.children}</div>;
ReactDOM.render(
<WindowWidth>
{({ width }) => {
if (width >= 992) {
return <Horizontal>{width}px</Horizontal>;
}
return <Vertical>{width}px</Vertical>;
}}
</WindowWidth>,
document.querySelector("#react-app")
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.