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