Как сделать панель заголовков для каждого TopTabs в реагирующей навигации V3

Question

Я использую React Navigation V3 для своего проекта, и мне нужна отдельная строка заголовка для каждого экрана верхней вкладки, а не общая панель заголовка для каждого экрана верхней вкладки.

Я пытался сделать это, но панель заголовков находится под toptabs. На самом деле мой проект требует, чтобы на каждом экране главных вкладок были разные кнопки и заголовок.

Я сделал пример на выставке, пожалуйста, просмотрите и дайте решение.

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