Реагирование Навигация по наложению вкладок с помощью HOC

Question

Так что я в основном пытаюсь обернуть весь навигатор, скажем, в избыточный (но он не является избыточным) следующим образом:

<HOC1>
    <HOC2>
        <HOC3>
            <HOC4>
                <TabNavigator />
            </HOC4>
        </HOC3>
    </HOC2>
</HOC1>

Дело в том, что HOC3 и HOC4 выглядят примерно так:

const HOC3 = () = {
    if(someCondition){
        return {this.props.children}
    }
    return <Text>Doing some work!</Text>
}

И эти компоненты в основном ждут некоторых условий, а затем возвращают потомков. Вместо <Text> я бы показал загрузочный счетчик, например.

Поскольку приложение имеет поток аутентификации, я начну с createSwitchNavigator, который будет переключаться между регистрацией (или createStackNavigator) и самим приложением (или createBottomTabNavigator).

Я хочу обернуть вкладки, поэтому я пытался сделать что-то вроде:

const TabNavigator = createBottomTabNavigator({
    Page1: { screen: Page1 },
    Page2: { screen: Page2 },
})

class AppNavigator extends React.Component {
    render() {
        return (
            <HOC1>
                <HOC2>
                    <HOC3>
                        <HOC4>
                            <TabNavigator />
                        </HOC4>
                    </HOC3>
                </HOC2>
            </HOC1>
        )
    }
}

export default AppNavigator

Однако, что бы я ни делал, это не работает так. Согласно их документам, я должен определить static router и передать this.props.navigation навигатору, если я хочу сделать что-то подобное, и даже если я это сделаю, это не сработает. Я не хочу показывать эту навигацию до тех пор, пока не будут выполнены определенные условия, и я не хочу, чтобы навигация обрабатывала эти условия. Итак, в основном: как обернуть вкладку навигатора, которую я передаю переключателю навигатора?

Answer 1

Таким образом, хотя это не решает конкретную проблему использования React Navigation и HOC, оно решает идею использования любой навигации / маршрутизатора с любыми HOC, которые вам нравятся, особенно если вы привыкли к тому, как React обрабатывает маршрутизацию:

Ссылка на React Router

Он работает точно так же, как React, поэтому вы можете обернуть свой маршрутизатор во что угодно:

<HOC>
    <HOC2>
        <HOC3>
            <HOC4>
                <NativeRouter>
                    <Route path="/" component={Home}>
                    <Route about="/about" component={About}>
                </NativeRouter>
            </HOC4>
        <HOC3>
    <HOC2>
<HOC1>

В этом конкретном случае, если вы получили странные условия гонки или что-то подобное, маршрутизатор не будет отображаться / использоваться до тех пор, пока не будут разрешены HOC. Однако при использовании этого подхода НЕ позволяет передавать вещи в маршруты в качестве реквизита . Так что, если у вас есть HOC, который должен что-то разрешить и передать что-то в маршрутизатор / маршруты, вы должны использовать Redux или что-то подобное.