React-native-router-flux: рдХреНрдпрд╛ рдУрд░рд┐рдПрдВрдЯреЗрд╢рди рдореЗрдВ рдмрджрд▓рд╛рд╡ рд╣реЛрдиреЗ рдкрд░ рдиреЗрд╡рдмрд╛рд░ рдХреЛ рдЫрд┐рдкрд╛рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рд╣реИ?

рдХреЛ рдирд┐рд░реНрдорд┐рдд 18 рдЕрдкреНрд░реИрд▓ 2016  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: aksonov/react-native-router-flux

рдореИрдВ рдкреЛрд░реНрдЯреНрд░реЗрдЯ рдореЛрдб рдореЗрдВ рдиреЗрд╡рдмрд╛рд░ рджрд┐рдЦрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдФрд░ рд▓реИрдВрдбрд╕реНрдХреЗрдк рдореЛрдб (рдлреБрд▓рд╕реНрдХреНрд░реАрди рд╡реАрдбрд┐рдпреЛ рдХреЗ рд▓рд┐рдП) рдореЗрдВ рдЫрд┐рдкрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред рдХреНрдпрд╛ рдЗрд╕реЗ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рд╣реИ?

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЖрдк рдЕрдкрдирд╛ рд╕реНрд╡рдпрдВ рдХрд╛ рдирд╡рдмрд╛рд░ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕реЗ рджреГрд╢реНрдп рдореЗрдВ рднреЗрдЬ рд╕рдХрддреЗ рд╣реИрдВред рдореИрдВ рдРрд╕рд╛ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ

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>
        );
    }

рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕ рддрд░рд╣ рдХреЗ рддрд░реНрдХ рдХреЛ рдирд╡рдмрд╛рд░ рдШрдЯрдХреЛрдВ рдХреЗ рднреАрддрд░ рд╢рд╛рдорд┐рд▓ рдХрд░ рд╕рдХреЗрдВ рдпрджрд┐ рд╕рдореБрджрд╛рдп рдЗрд╕реЗ рдЪрд╛рд╣реЗрдЧрд╛ рдФрд░ рдкреАрдЖрд░ рдЬрдорд╛ рдХрд░реЗрдЧрд╛ред

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЖрдк рдЕрдкрдирд╛ рд╕реНрд╡рдпрдВ рдХрд╛ рдирд╡рдмрд╛рд░ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕реЗ рджреГрд╢реНрдп рдореЗрдВ рднреЗрдЬ рд╕рдХрддреЗ рд╣реИрдВред рдореИрдВ рдРрд╕рд╛ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ

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>
        );
    }

рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕ рддрд░рд╣ рдХреЗ рддрд░реНрдХ рдХреЛ рдирд╡рдмрд╛рд░ рдШрдЯрдХреЛрдВ рдХреЗ рднреАрддрд░ рд╢рд╛рдорд┐рд▓ рдХрд░ рд╕рдХреЗрдВ рдпрджрд┐ рд╕рдореБрджрд╛рдп рдЗрд╕реЗ рдЪрд╛рд╣реЗрдЧрд╛ рдФрд░ рдкреАрдЖрд░ рдЬрдорд╛ рдХрд░реЗрдЧрд╛ред

рд╣рд╛рдВ, рдореИрдВ рдХреБрдЫ рдЗрд╕реА рддрд░рд╣ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рд╕рд░рд▓ -

  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)});
  }

рдЕрд░реЗ @vinayr рдореИрдВ рдХреБрдЫ рдРрд╕рд╛ рд╣реА рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди, рдореЗрд░реЗ рд╕реАрди рдкрд░ рдореБрдЭреЗ рдорд┐рд▓ рдЧрдпрд╛

componentDidMount(){
   Actions.refresh({hideNavBar:false});
}

componentWillUnmount(){
   Actions.refresh({hideNavBar: true})
}

рддреЛ рдЬрдм рдореИрдВ рджреГрд╢реНрдп рдХреЛ рдиреЗрд╡рдмрд╛рд░ рдЫреЛрдбрд╝ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рд░рд╛рдЬреНрдп рдХреЛ рдлрд┐рд░ рд╕реЗ рд▓реЛрдб рдХрд░рддрд╛ рд╣реИ рдпрд╛ рдРрд╕рд╛ рдХреБрдЫ рднреА рдХрд░рддрд╛ рд╣реИ, рддреЛ рдкрд┐рдЫрд▓реЗ рджреГрд╢реНрдп рдореЗрдВ рдПрдХ рд╕рддреНрдпрд╛рдкрди рдерд╛ рдЬреЛ рд╡рд░реНрддрдорд╛рди рджреГрд╢реНрдп рдкрд░ рдзрдХреЗрд▓ рджрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛, рдФрд░ рдЬрдм рдореИрдВ рд╡рд╛рдкрд╕ рдЬрд╛рддрд╛ рд╣реВрдВ рддреЛ рдпрд╣ рджреГрд╢реНрдп рдкрд░ рдлрд┐рд░ рд╕реЗ рд░реАрдбрд╛рдпрд░реЗрдХреНрдЯ рдХрд░рддрд╛ рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕