Реагировать на изменение заголовка навигации с экраном

У меня есть StackNavigation, и мне нужен Header (заголовок компонента) по умолчанию, и я хочу, чтобы «глубокие страницы» отображались с заголовком по умолчанию, созданным для React Navigation.

На моей индексной странице **Index** просто хотел компонент Header (первый заголовок) ... но показывает другой пустой заголовок:

введите описание изображения здесь

На моей "глубокой странице" **Teste** просто хочу, чтобы заголовок и кнопка "Назад" были автоматически созданы RNav (второй заголовок) ... но появляется первый заголовок.

введите описание изображения здесь

Это моя конфигурация навигации:

const RootNavigator = StackNavigator({
    Welcome: {screen: Welcome},
    User: {
        screen: TabNavigator({
            Clientes: {
                screen: StackNavigator({
                    Index: {screen: Clientes},
                    Teste: {
                        screen: Teste,
                        header: undefined
                    }
                }, {
                    header: null,
                    navigationOptions: {
                        tabBarIcon: () => (
                            <Icon name="list-alt" size={22} color="#ffffff" />
                        )
                    }
                })
            },
            Opcoes: { screen: Opcoes }
        }, {
            tabBarPosition: 'bottom',
            tabBarOptions: {
                showLabel: false,
                activeTintColor: '#fff',
                showIcon: true,
                inactiveTintColor: '#ccc',
                indicatorStyle: {
                    backgroundColor: '#ccc'
                },
                style: {
                    backgroundColor: '#536878'
                }
            }
        })
    },
}, {
    initialRouteName: 'User',
    navigationOptions: {
        header: props => <Header {...props} />
    }
});

export default RootNavigator;

react-native reactjs stack-navigator react-navigation
person Igor Martins    schedule 26.11.2017    source источник
comment
Помог ли приведенный ниже ответ?   -  person zarcode    schedule 04.12.2017
comment
По моему опыту, не напутайте с вложенным навигатором, вам придется делать это сложно, даже если он работает. Вместо этого используйте NativeBase, у вас будет больше контроля над заголовком и многое другое. nativebase.io   -  person Val    schedule 05.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Каждый StackNavigator содержит один заголовок, первый - от RootNavigator = StackNavigator({, а нижний - от Clientes: { screen: StackNavigator({.

Во-первых, швы header: null в вашем Clientes: { screen: StackNavigator({ не действуют. Вместо этого вы должны попробовать headerMode: 'none', это удалит пустой заголовок из Index, но также удалит заголовок из Teste с заголовком и кнопкой возврата, что не решит всех ваших проблем.

Поэтому я бы предложил другую структуру навигаторов:

RootNavigator(StackNavigator)
- Welcome
- Index
- Teste
- User(TabNavigator)
    - Clientes 
    - Opcoes

Что вам следует сделать дальше, так это установить другой заголовок (по умолчанию, с кнопкой возврата) для Teste внутри самого компонента, примерно так:

import { Header } from 'react-navigation';

Teste.navigationOptions = ({ navigation, screenProps }) => ({
    return {
        header: <Header {...screenProps} {...navigation} />
    }
});

Вы даже можете создать свой собственный компонент заголовка и использовать его в Teste.navigationOptions.

person zarcode    schedule 28.11.2017