如何将 header 添加到 react-native-router-flux 标签栏？

Question

我正在使用 react-native 及其第三方模块 react-native-router-flux 制作 simpe 应用程序，以便轻松处理组件导航器。

我想在 tabs 上方添加 header 组件，显示我的应用程序名称和选定的标签名称。我尝试了几种方法，但我不知道将 header 组件代码放在哪里。

我的顶级组件代码是这样的

<Router>
    <Scene key="root">    
        <Scene key="todoList" tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
            <Scene key="first" title="First" icon={TabIcon}>
                <Scene key="scarlet" component={TabComponent1} hideNavBar title="tab1" initial />
            </Scene>
            <Scene key="second" title="Second" icon={TabIcon}>
                <Scene key="scarlet2" component={TabComponent2} hideNavBar title="tab2" initial />
            </Scene>
            <Scene key="third" title="Third" icon={TabIcon}>
                <Scene key="scarlet3" component={TabComponent3} hideNavBar title="tab3" initial />
            </Scene>
        </Scene>
    </Scene>
</Router>

这实际上看起来像

我想做的只是在选项卡上方添加 header 组件，例如

怎么做？请给我一个提示！我把代码放在哪里？

Answer 1

如果您想使用自己的 Header 组件，我认为您应该在单独的文件中为自己编写一个，然后 export/import 将其显示在屏幕上。 react-native 本身正在按顺序（从上到下）一个接一个地渲染组件。因此，如果您这样做，您应该将导入的 Header 组件放在 render() 函数的顶部。

另一种方法是使用像 native-base 这样的第三方模块（它已经定义了一个 Header 组件）。

https://github.com/GeekyAnts/NativeBase

如何将 header 添加到 react-native-router-flux 标签栏？

How to add header to react-native-router-flux tabbar?

react-native

react-native-router-flux