React-native-router-flux: ๋ฐฉํ–ฅ์ด ๋ณ€๊ฒฝ๋  ๋•Œ ํƒ์ƒ‰ ๋ชจ์Œ์„ ์ˆจ๊ธฐ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2016๋…„ 04์›” 18์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: aksonov/react-native-router-flux

์„ธ๋กœ ๋ชจ๋“œ์—์„œ ํƒ์ƒ‰ ๋ชจ์Œ์„ ํ‘œ์‹œํ•˜๊ณ  ๊ฐ€๋กœ ๋ชจ๋“œ(์ „์ฒด ํ™”๋ฉด ๋น„๋””์˜ค์˜ ๊ฒฝ์šฐ)์—์„œ ์ˆจ๊ธฐ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๊ณ ์œ ํ•œ 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 ๋‚ด์— ์ด๋Ÿฌํ•œ ๋…ผ๋ฆฌ๋ฅผ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๊ณ ์œ ํ•œ 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})
}

๋”ฐ๋ผ์„œ ๋‚ด๊ฐ€ ์žฅ๋ฉด ํƒ์ƒ‰ ๋ชจ์Œ์„ ๋– ๋‚  ๋•Œ ์ƒํƒœ ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๊ฒƒ์„ ๋‹ค์‹œ ๋กœ๋“œํ•  ๋•Œ ์ด์ „ ์žฅ๋ฉด์— ํ˜„์žฌ ์žฅ๋ฉด์œผ๋กœ ํ‘ธ์‹œ๋œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ฐ€ ์žˆ์—ˆ๊ณ  ๋Œ์•„๊ฐ€๋ฉด ์žฅ๋ฉด์œผ๋กœ ๋‹ค์‹œ ๋ฆฌ๋””๋ ‰์…˜๋ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰