Question

所以我基本上是在尝试将整个导航器包装成redux（但不是redux），就像这样：

<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如何处理路由： / p>

React Router link

它的工作原理与React完全一样，因此您可以将路由器包装成任何喜欢的东西：

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

在这种特定情况下，如果您遇到了奇怪的比赛条件或其他类似情况，则在解决HOC问题之前，路由器将不会呈现/可用。但是，使用这种方法，不允许您将内容作为道具传递给路线。因此，如果您拥有一个可以解决问题的HOC，并将该问题传递到路由器/路由，则应该使用Redux或类似的工具。

使用HOC反应导航包装选项卡导航器

1 个答案: