Условная отрисовка экрана - Как скрыть исходную экранную вкладку Bar и 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 и просто перемещаться с помощью вашей навигации.

Надеюсь, это поможет. Удачи!