条件屏幕渲染-如何隐藏原始屏幕的tabBar和Header

Question

我想从“订单”屏幕中实现的目标是：如果用户未登录，则将其定向到另一个屏幕。这也是堆栈的一部分。过渡很好，但是原始屏幕的标题（在本例中为orders.js）没有变化

Orders.js

    class Orders extends React.Component {
        static navigationOptions = ({ navigation }) => {
            return {
                headerTitle: <TextHeader title={I18n.t('tabsLang.orders')} />,
                headerTitleStyle: header.title,
                headerLeft: <View />,
                headerRight: <View />,
            };
        };

        constructor(props) {
            super(props);

            this.state = {
                orders: true,
                isLoggedIn: false,
            };
        }

        render() {
            if (this.state.isLoggedIn) {
                if (!this.state.orders) {
                    //Orders
                    return (
                        <View style={styles.container}>
                            <OrderItem />
                        </View>
                    );
                } else {
                    //No Orders Screen
                    return <NoOrders />;
                }
            } else {
                return <UserSplash/>;
}
        }
    }

    export default Orders;

UserSplash.js

class Login extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            header: null,
        };
    };



    render() {...
    }
}

Answer 1

我需要指出两点。

1。双头混淆

<Order>
    Static navigationOptions = {
        headerTitle: Something
    }
    render(){
        if(state.isLoggedIn){
            <View>
                ... Show orders or not
            </View>
        } else {
            <UserSplash>
                Static navigationOptions = {
                    header: null
                }
            </UserSplash>
        }
    }
</Order>

如果您查看此内容，则在禁用UserSplash的标头时，实际上是在禁用最后一个双标头。如果不禁用它，则视图顶部将显示2个标题。

2。 NavigationOptions

设置

时

  

navigationOptions

如果您意识到这一点，就将其声明为静态。因此无法更改参数。我建议您将UserSplash与Order.js分开，然后通过导航进行导航。

希望有帮助。祝你好运！