значок навигационной гамбургера в заголовке всех заголовков верхнего уровня (с помощью выдвижного ящика)?

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, если я не внутри каждого компонентов ... просто состояние и параметры. Нужно ли дублировать код в каждом из этих файлов?

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 Config:
Первый 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 
    }; 
    ...