React-native-router-flux: Gibt es eine Möglichkeit, die Navigationsleiste auszublenden, wenn sich die Ausrichtung ändert?

Erstellt am 18. Apr. 2016  ·  3Kommentare  ·  Quelle: aksonov/react-native-router-flux

Ich möchte die Navigationsleiste im Hochformat anzeigen und im Querformat ausblenden (für Vollbildvideos). Gibt es eine Möglichkeit, dies zu tun?

Hilfreichster Kommentar

Sie können Ihre eigene NavBar implementieren und an die Szene übergeben. Ich benutze sowas

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

Vielleicht könnten wir eine solche Logik in die Komponenten von NavBar integrieren, wenn die Community dies möchte und PR einreicht.

Alle 3 Kommentare

Sie können Ihre eigene NavBar implementieren und an die Szene übergeben. Ich benutze sowas

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

Vielleicht könnten wir eine solche Logik in die Komponenten von NavBar integrieren, wenn die Community dies möchte und PR einreicht.

Ja, ich verwende etwas Ähnliches, wenn auch einfacher -

  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 , ich versuche etwas Ähnliches zu machen, aber in meiner Szene habe ich es

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

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

Wenn ich also die Szene verlasse, lädt die Navbar aber auch den Zustand neu oder so ähnlich, da die vorherige Szene eine Validierung hatte, die auf die aktuelle Szene verschoben wurde, und wenn ich zurückgehe, wird sie wieder zur Szene umgeleitet.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen