带有 HOC 的 React Navigation 换行选项卡导航器

Posted 2023-03-15

【中文标题】带有 HOC 的 React Navigation 换行选项卡导航器

【英文标题】：React Navigation wrap tab navigator with a HOC

【发布时间】：2018-11-07 23:08:20

【问题描述】：

所以我基本上试图将整个导航器包装在 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 传递给导航器，即使我这样做，它也不起作用。在满足某些条件之前，我不想显示此导航，并且我不希望导航处理这些条件。所以基本上：如何包装我传递给切换导航器的选项卡导航器？

【问题讨论】：

我也有同样的要求，你搞定了吗？

@dentemm 不是真的，经过几天的尝试，我最终改用了github.com/ReactTraining/react-router。它就像一个魅力，特别是如果你已经习惯了这样的 React Router。我没有在这里发布它作为答案，考虑到它是该方法的解决方案，而不是具体问题，但我现在可能！

好的，谢谢您的回复！经过一番思考，我意识到我真的不需要包装 TabNavigator，而是包装 TabBar 组件。所以我创建了一个自定义的 TabBar，我可以毫无问题地包装它。

@dentemm 如果您破解了一种使用 HOC 控制导航本身渲染的方法，也许可以发布一个工作代码示例？那将会很酷。你能做类似if(someCondition) return <LoadingSpinner /> else return <TabBar /> 的事情吗？我的特定用例需要阻止导航的呈现，从而阻止我在页面本身中进行的任何 componentDidMount 或 constructor 调用

【参考方案1】：

因此，虽然这并不能解决使用 React Navigation 和 HOC 的具体问题，但它确实解决了将任何导航/路由器与任何你喜欢的 HOC 一起使用的想法，特别是如果你习惯了 React 如何处理路由：

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 或类似的东西。