์ธ๋ก ๋ชจ๋์์ ํ์ ๋ชจ์์ ํ์ํ๊ณ ๊ฐ๋ก ๋ชจ๋(์ ์ฒด ํ๋ฉด ๋น๋์ค์ ๊ฒฝ์ฐ)์์ ์จ๊ธฐ๊ณ ์ถ์ต๋๋ค. ์ด ์์ ์ ์ํํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๊ณ ์ ํ NavBar๋ฅผ ๊ตฌํํ์ฌ ์ฅ๋ฉด์ ์ ๋ฌํ ์ ์์ต๋๋ค. ๋๋ ๊ทธ๋ฐ ๊ฒ์ ์ฌ์ฉํ๊ณ ์๋ค.
onLayout({nativeEvent}){
const isPortrait = nativeEvent.layout.width === WIDTH;
if (isPortrait){
if (this.state.height != NAVBAR_HEIGHT_PORTRAIT){
this.setState({height: NAVBAR_HEIGHT_PORTRAIT, delta:STATUS_BAR_HEIGHT});
}
} else {
if (this.state.height != NAVBAR_HEIGHT_LANDSCAPE){
this.setState({height: NAVBAR_HEIGHT_LANDSCAPE, delta:0});
}
}
}
render(){
return (
<View onLayout={this.onLayout.bind(this)} style={[styles.container, {height:this.state.height}, this.props.style]} >
{this.props.navBarHeader}
<View style={[styles.container, {height:this.state.height}, this.props.style]} >
<View style={{height:this.state.delta,flex:1}}></View>
<View style={{height:this.state.height-this.state.delta, flexDirection:'row'}}>
{this.props.navigationState.children.length > 1 ? this.renderBackButton(this.props) : this.renderLeftButton(this.props)}
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
{this.renderTitle(this.props)}
</View>
{this.renderRightButton(this.props)}
</View>
{this.props.footer}
</View>
</View>
);
}
์ปค๋ฎค๋ํฐ๊ฐ ์ํ๊ณ PR์ ์ ์ถํ ๊ฒฝ์ฐ ๊ตฌ์ฑ ์์ NavBar ๋ด์ ์ด๋ฌํ ๋ ผ๋ฆฌ๋ฅผ ํตํฉํ ์ ์์ต๋๋ค.
์, ๋ ๊ฐ๋จํ์ง๋ง ๋น์ทํ ๊ฒ์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
onLayout = event => {
const { width, height } = event.nativeEvent.layout;
var newStyle;
if (width > height) {
newStyle = update(this.state.style, {marginTop: {$set: 0}});
} else {
newStyle = update(this.state.style, {marginTop: {$set: 64}});
}
this.setState({style: newStyle});
// hide navbar in landscape mode
Actions.refresh({hideNavBar: (width > height)});
}
Hey @vinayr ๋น์ทํ ์ผ์ ํ๋ ค๊ณ ํ์ง๋ง ๋ด ์ฅ๋ฉด์์
componentDidMount(){
Actions.refresh({hideNavBar:false});
}
componentWillUnmount(){
Actions.refresh({hideNavBar: true})
}
๋ฐ๋ผ์ ๋ด๊ฐ ์ฅ๋ฉด ํ์ ๋ชจ์์ ๋ ๋ ๋ ์ํ ๋๋ ์ด์ ์ ์ฌํ ๊ฒ์ ๋ค์ ๋ก๋ํ ๋ ์ด์ ์ฅ๋ฉด์ ํ์ฌ ์ฅ๋ฉด์ผ๋ก ํธ์๋ ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ์์๊ณ ๋์๊ฐ๋ฉด ์ฅ๋ฉด์ผ๋ก ๋ค์ ๋ฆฌ๋๋ ์ ๋ฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ณ ์ ํ NavBar๋ฅผ ๊ตฌํํ์ฌ ์ฅ๋ฉด์ ์ ๋ฌํ ์ ์์ต๋๋ค. ๋๋ ๊ทธ๋ฐ ๊ฒ์ ์ฌ์ฉํ๊ณ ์๋ค.
์ปค๋ฎค๋ํฐ๊ฐ ์ํ๊ณ PR์ ์ ์ถํ ๊ฒฝ์ฐ ๊ตฌ์ฑ ์์ NavBar ๋ด์ ์ด๋ฌํ ๋ ผ๋ฆฌ๋ฅผ ํตํฉํ ์ ์์ต๋๋ค.