0

I'm making simpe application using react-native, and its third party module react-native-router-flux for easy handling component navigator.

I want to add header component above tabs which showing my app name, and selected tab name. I tried several ways but I don't know where to put the header component code.

My top component code like this 

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

This actually look like

enter image description here

What I want to do is simply add header component above tabs, like

enter image description here

How to do that? Please give me a hint! where I put that code?

ton1
  • 7,238
  • 18
  • 71
  • 126

1 Answers1

1

If you want to use your own Header component, I think you should write one for yourself in a separate file and export/import it to the screens. The react-native itself is rendering the components one after the other in order (from up to the bottom). So if you are doing it this way you should place your imported Header component on the top inside the render() function.

The other way is using a third party module like the native-base (which has a Header component already definied).

https://github.com/GeekyAnts/NativeBase

ddobby94
  • 273
  • 4
  • 12