如何将标头添加到react-native-router-flux tabbar？

Question

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

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

我的顶级组件代码

<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>

这实际上看起来像

我想要做的只是在标签上方添加标题组件，例如

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

Answer 1

如果你想使用你自己的Header组件，我认为你应该在一个单独的文件中为自己编写一个并将其导出/导入到屏幕上。本身反应本身依次呈现组件（从上到下）。因此，如果你这样做，你应该将导入的Header组件放在render（）函数的顶部。

另一种方法是使用第三方模块，例如native-base（已经定义了Header组件）。

https://github.com/GeekyAnts/NativeBase