React native re-layout
How can i rebuild a layout of my react-native app? I need it when changed orientation. Detecting orientationchange with react-native-orientation plugin works well, but all layout in render() function does not changed. For example this not working. When i am using orientationchange function, alert works, but this.setState({bgColor: 'green'}); does nothing.
state = {
bgColor: 'green',
orientation: 'PORTRAIT',
};
componentWillMount() {
if (this.state.orientation === 'LANDSCAPE') {
if (Device.width > 768) {
this.setState({bgColor: 'red'});
}
}
else{
this.setState({bgColor: 'green'});
}
}
render() {
return (
<View style={[styles.appWrap, { backgroundColor: this.state.bgColor}]}></View>
)}
Most probably your handle orientation method is not bind to context. So you need to use this._orientationDidChange.bind(this) in your code. Try this out.
componentDidMount() {
Orientation.addOrientationListener(this._orientationDidChange.bind(this));
}
_orientationDidChange = (orientation) => {
if (orientation === 'LANDSCAPE') {
this.setState({ bgColor : 'green'});
} else {
this.setState({ bgColor : 'red'});
}
}
render() {
return (
<View style={[styles.appWrap, { backgroundColor: this.state.bgColor}]}></View>
)}
Comments
Post a Comment