Reaguj Zmiana nagłówka nawigacji z ekranem

Question

Mam opcję StackNavigation i chcę mieć domyślną wartość Header (nagłówek komponentu) i chcę, aby wyświetlane były "głębokie strony" z domyślnym nagłówkiem wygenerowanym dla React Navigation.

W mojej stronie indeksu **Index**, po prostu chciał komponent nagłówek (pierwszy nagłówek) ... ale pojawia się kolejny pusty nagłówek:

W moim „głębokim stronie” **Teste** właśnie ma tytuł i przycisk wstecz autogenarowany przez RNav (drugi nagłówek) ... ale pojawia się pierwszy nagłówek.

To mój nav config:

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; 

Answer 1

Każdy StackNavigator przynosi jeden nagłówek, pierwszy z nich jest od RootNavigator = StackNavigator({ i dolny, który widzisz pochodzi Clientes: { screen: StackNavigator({.

Po pierwsze, szwy header: null w twoim Clientes: { screen: StackNavigator({ nie mają żadnego efektu. Powinieneś wypróbować headerMode: 'none' zamiast tego, to usunie pusty nagłówek z Index, ale także nagłówek z Teste z tytułem i przyciskiem Wstecz, który nie rozwiązuje wszystkich twoich problemów.

Więc chciałbym zaproponować inną strukturę nawigator:

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

Co należy zrobić jest ustawiony inny nagłówek (domyślny, z przyciskiem z tyłu) na Teste wewnątrz samego elementu, coś takiego:

import { Header } from 'react-navigation'; 

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

Można nawet utworzyć własny komponent nagłówka i użyć go w Teste.navigationOptions.