当TabNavigator在屏幕顶部时，如何在其上方添加一个header？

Question

我在 TabNavigator 下有 3 个屏幕。 TabNavigator 模式是 top（选项卡在屏幕顶部而不是 bottom）

我想在 选项卡前添加 Header 。

目前我在所有屏幕上使用此代码在选项卡下方显示header，然后屏幕内容如下：

render() 
{
    return(
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <View style={styles.header}>
                <View style={styles.headerItemsWrapper}>
                    <Text style={styles.hiddenRightItem}>foo</Text>
                    <Text style={styles.headerTitle}>bar</Text>
                    <TouchableOpacity onPress={()=>{ this.props.navigation.navigate("Home") }}>
                        <Text style={{color: 'blue'}}>baz</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <Text>
                stuff for the screen goes here...
            </Text>
        </View>
    )
} 

我该怎么做？

Answer 1

如果您创建一个 StackNavigator 的单个屏幕包含您的 TabNavigator 我相信您可以实现。

例子

const Tabs = TabNavigator({
   Tab1: { screen: Tab1 },
   Tab2: { screen: Tab2 },
   Tab3: { screen: Tab3 }
})
const Main = new StackNavigator({Tabs: { screen: Tabs });