如何在React Navigation V3中为每个TopTab制作标题栏

Question

我正在为我的项目使用React Navigation V3，我希望每个toptab的屏幕都有单独的标题栏，而不是每个toptab的公共标题栏。

我试图做到这一点，但页眉栏位于顶部标签下方。实际上，我的项目要求是在顶部选项卡的每个屏幕上都有不同的按钮和标题。

我已经在博览会上做了一个例子，请仔细阅读并给出解决方案。

https://snack.expo.io/@mudabbir/navigation-example

Answer 1

您可以使用以下静态导航选项在每个屏幕上自定义标题（仅适用于类组件）

static navigationOptions = {
    title: 'Home',
    headerTintColor: '#5F55B2',
    headerStyle: { height: 60 },
};

或

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: (
                <View style={{ alignItems: 'center' }}>
                    <Text style={{ fontSize: 18 }}>Home</Text >
                    <Text>header</Text>
                </View >),
            headerRight: (
                <View style={{ flexDirection: 'row' }}>
                    <Button transparent>
                        <Icon name='ios-search' />
                    </Button>
                    <Button transparent>
                        <Icon name='ios-calendar' />
                    </Button>
                </View>
            ),
            headerStyle: { backgroundColor: 'green' }
        }
    }