当TabNavigator位于屏幕顶部时，如何在其上方添加标题？

Question

我在TabNavigator下有3个屏幕。 TabNavigator模式为top（标签位于屏幕顶部而非bottom）

我想在标签

之前添加标题。

目前我在所有屏幕的渲染中使用此代码，在标签下方显示标题 ，然后屏幕内容如下：

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 });