React-native-router-flux: Есть ли способ скрыть панель навигации при изменении ориентации?

Созданный на 18 апр. 2016  ·  3Комментарии  ·  Источник: aksonov/react-native-router-flux

Я хочу показать панель навигации в портретном режиме и скрыть в ландшафтном режиме (для полноэкранного видео). Есть ли способ сделать это?

Самый полезный комментарий

Вы можете реализовать свой собственный NavBar и передать его в Scene. Я использую что-то подобное

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

Возможно, мы могли бы включить такую ​​логику в компоненты NavBar, если сообщество захочет этого и представит PR.

Все 3 Комментарий

Вы можете реализовать свой собственный NavBar и передать его в Scene. Я использую что-то подобное

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

Возможно, мы могли бы включить такую ​​логику в компоненты NavBar, если сообщество захочет этого и представит PR.

Да, я использую нечто подобное, хотя и попроще -

  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 рейтинги