React Navigation画面でのヘッダーの変更

Question

私はStackNavigationを持っていて、デフォルトのHeader（コンポーネントヘッダー）が必要で、その "deep pages"がリアクションナビゲーション用に生成されたデフォルトヘッダーで表示されたがっています。私のインデックスページ**Index**、ちょうどヘッダーコンポーネント（最初のヘッダーを）望んでいた...しかし、別のブランクヘッダ現れで

：私の「深いページ」**Teste**で

だけのタイトルをしたいとRNav（2番目のヘッダー）によって自動生成された戻るボタンですが、最初のヘッダーが表示されます。

これは私の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

すべてStackNavigatorは1つのヘッダをもたらし、最初のものはRootNavigator = StackNavigator({からのものであり、あなたが見る下の1がClientes: { screen: StackNavigator({から来ています。

まず、Clientes: { screen: StackNavigator({の縫い目header: nullは効果がありません。 headerMode: 'none'を代わりに試してください。これにより、Indexから空白のヘッダーが削除されますが、タイトルと戻るボタンでTesteのヘッダーも削除されます。これはすべての問題を解決するものではありません。

だから私は別のナビゲーター構造を示唆している：あなたは次のコンポーネント自体の内部Testeに別のヘッダ（バックボタンでデフォルトの1を、）設定されている何をすべきか

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

、このような何か：

を

import { Header } from 'react-navigation'; 

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

独自のヘッダコンポーネントを作成してTeste.navigationOptionsで使用することもできます。