React NativeのStackNavigatorでカスタムヘッダをロード

Question

私はReact Nativeで静的なAppbarとして使用したHeaderコンポーネントを持っていました。今では、StackNavigatorを含めると、画面間の遷移を管理しやすくなりました。

私の問題は、私のHeaderコンポーネントをStackNavigatorヘッダーに含めることができないということです。私の現在のコードと結果は以下の通りである：Headerがロードされていないことを

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; 

const GiftNavigator = StackNavigator(
{ 
    All: { 
    screen: GiftListSection, 
    navigationOptions: { 
     tabBarLabel: 'All', 
    } 
    }, 
    Reclaim: { 
    screen: GiftReclaimSection, 
    navigationOptions: { 
     tabBarLabel: 'Reclaim', 
    } 
    } 
}, { 
    headerMode: 'float', 
    header: (
     <View style={{ height: APPBAR_HEIGHT }}> 
      <Header /> 
     </View> 
    ) 
}); 

注意。これは単なる空白スペースです。 HeaderコンポーネントをStackNavigatorヘッダーにロードするにはどうすればよいですか？自分でHeaderをロードすると、デフォルトのナビゲータヘッダーの戻るボタンが表示されますか？

Answer 1

あなたはこのように試すことができます：

export default class YourScreen extends Component { 

    static navigationOptions = { 
    header: <YourHeader/>, 
    }; 
    ... 
} 

か：

const GiftNavigator = StackNavigator(
{ 
    All: { 
    screen: GiftListSection, 
    navigationOptions: { 
     tabBarLabel: 'All', 
     header: <YourHeader/>, 
    } 
    }, 
    Reclaim: { 
    screen: GiftReclaimSection, 
    navigationOptions: { 
     tabBarLabel: 'Reclaim', 
     header: <YourHeader/>, 
    } 
    } 
} 

希望これをあなたを助けられる！

Answer 2

headerMode: 'none'オプションを使用してデフォルトの反応ナビゲーションヘッダーを完全に隠すことができ、各コンポーネントごとに独自のヘッダーを処理できます。

それともheaderプロパティを使用し、独自のカスタムヘッダー・コンポーネントを読み込むことができます：

navigationOptions: { 
    header: props => <CustomHeader {...props} />, 
},