React-native-router-flux: هل هناك طريقة لإخفاء شريط التنقل عندما يتغير الاتجاه؟

تم إنشاؤها على ١٨ أبريل ٢٠١٦  ·  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>
        );
    }

ربما يمكننا دمج مثل هذا المنطق في مكونات 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>
        );
    }

ربما يمكننا دمج مثل هذا المنطق في مكونات 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)});
  }

مرحبًا vinayr ، أنا أحاول أن أفعل شيئًا مشابهًا ، لكنني حصلت على المشهد الخاص بي

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

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

لذلك عندما أغادر المشهد ، فإن شريط التنقل ، ولكن أيضًا يعيد تحميل الحالة أو شيء من هذا القبيل ، لأن المشهد السابق كان لديه التحقق الذي دفع إلى المشهد الحالي ، وعندما أعود ، فإنه يعيد التوجيه مرة أخرى إلى المشهد.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات