すべてのトップレベルスクリーンヘッダー（引き出しを使用）のヘッダーの反応ナビゲーションハンバーガーアイコン？

Question

私はそのようなヘッダーの色が白作るなど、いくつかの事柄については、「普遍的」ヘッダのオプションを設定できます。

// example screens 
const SettingsScreen =() => <View><Text>SettingsScreen...</Text></View> 
const List =() => <View><Text>List...</Text></View> 
const Item =() => <View><Text>Item...</Text></View> 

// create an object to pass on to relevant screens 
const navigationOptions = { 
     header: { 
     style: { 
       backgroundColor: '#fff' 
      } 
     }, 
    } 

// MAIN SCREEN : a screen showing a list with ability to click on an list item and go to a detail page 
// ============================ 

const ListScreens = StackNavigator({ 
    List: { screen: List, navigationOptions: navigationOptions }, //show a hamburger menu 
    Item: { screen: Item, navigationOptions: navigationOptions }, // this is a detail page, so don not show a hamburger menu, rather show a back button 
}); 

const SettingsContainer = StackNavigator({ 
    Settings: { screen: SettingsScreen }, 
}); 


// LOGGED IN DRAWER VIEW : top-level component is a drawer with two menu items (main and settings) 
// ============================ 
const LoggedIn = DrawerNavigator({ 
    Main: { screen: ListScreens }, 
    Settings: { screen: SettingsContainer }, 
}); 

//... do stuff for root component 

DrawerNavigationメニューレベルですべてのルートにハンバーガーメニューを追加するためのベストプラクティスは何ですか？私はこのポップを引き出しを開けてもらいたい。私がの各の中にいなければ、props.navigationへのアクセスはありません...ちょうど状態とparams。それらのファイルのそれぞれにコードを複製する必要がありますか？

static navigationOptions = { 
    title: ({ state }) => { 
    if (state.params.mode === 'info') { 
     return `${state.params.user}'s Contact Info`; 
    } 
    return `Chat with ${state.params.user}`; 
    }, 
    header: ({ state, setParams }) => { 
    // The navigation prop has functions like setParams, goBack, and navigate. 
    let right = (
     <Button 
     title={`${state.params.user}'s info`} 
     onPress={() => setParams({ mode: 'info' })} 
     /> 
    ); 
    if (state.params.mode === 'info') { 
     right = (
     <Button 
      title="Done" 
      onPress={() => setParams({ mode: 'none' })} 
     />   
    ); 
    } 
    return { right }; 
    }, 
    .. 

DOCS HERE

関連する問題（多分）：

https://github.com/react-community/react-navigation/issues/165

Answer 1

お知らせ！ navigationOptionsはStack NavigationとDrawer Navigation

との違いですが、引き出しのナビゲーションのために、あなたはあなた自身のヘッダを追加することができますし、contentComponentコンフィグであなたのスタイルを作る：
まずimport { DrawerItems, DrawerNavigation } from 'react-navigation'その後

DrawerItems前にヘッダー：

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>。 DrawerItems後

フッター：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>。

Answer 2

私は自分のヘッダーを作成しました：

<View style={styles.navBarContainer}> 
    <View style={styles.navBarRow}> 
     <TouchableHighlight underlayColor={'#COLOR'} onPress={() => {this._drawer.openDrawer()}}> 
     <Image source={require('../assets/images/menu-icon.png')} style={styles.menuIcon}/> 
     </TouchableHighlight> 
     <Text style={styles.navBarText}>{'TITLE'}</Text> 
    <View/> 
    </View> 

あなたは上記の読むことができるように、私は私がコンポーネントで参照openDrawer（）イベント、使用しています：

<Drawer 
    ref={(drawer) => {this._drawer = drawer}} 
    ... 
> 

Iをデフォルトのヘッダーを削除する必要がありました：

export default class HomeScreen extends Component { 
    static navigationOptions = { 
    header: null 
    }; 
    ...