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

Question

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

订单.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() {...
    }
}

标签： react-nativereact-navigation

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.导航选项

当您设置

导航选项

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

希望能帮助到你。祝你好运！