react-native: react-navigation schubladenetiketten

Question

Ich möchte Schubladeschilder/-separatoren im Schubfach-Navigator haben.

Somewhat like this

Wie würde ich das tun?

Answer 1

Einfach. Was Sie sehen, heißt contentComponent. Grundsätzlich müssen Sie eine contentComponent Stütze in Ihren Schubladennavigator einspritzen.

contentComponent Komponente verwendet, um den Inhalt der Schublade zu machen, beispielsweise Navigationspunkte. Empfängt die Navigationsstütze für die Schublade. Read more here

import DrawerContent from '../app/components/DrawerContent' 
const drawerConfiguration = { 
    initialRouteName: 'MainStackNavigatior', 
    headerMode: 'screen', 
    drawerWidth: deviceWidth/1.38, 
    contentComponent: DrawerContent 
} 

Wo contentComponent nur ScrollView ist eine Liste von Vorlagen enthält.

class DrawerContent extends Component { 
    onItemPress(item) { 
    const { navigation } = this.props; 
    navigation.navigate(item.key); 
    } 

    renderDrawerItem(route) { 
    const { drawerItems } = this.props; 
    if (drawerItems.indexOf(route.key) > -1) { 
     return (
     <TouchableOpacity style={styles.drawerItem} key={route.key} onPress={() => this.onItemPress(route)}> 
      <Text>{route.routeName}</Text> 
     </TouchableOpacity> 
    ); 
    } 
    return null; 
    } 

    render() { 
    const { navigation, isFetching, drawerItemsTitle } = this.props; 
    return (
     <View style={styles.container}> 
     {!isFetching && <View style={styles.drawerItemTitle}> 
      <Text style={styles.drawerItemTitleText}>{drawerItemsTitle}</Text> 
     </View>} 
     {!isFetching && <View> 
      {navigation.state.routes.map(route => this.renderDrawerItem(route))} 
     </View>} 
     {isFetching && <View style={styles.spinnerViewBg}> 
      <View style={styles.spinner}> 
      <ActivityIndicator 
       size="small" 
       animating 
      /> 
      </View> 
     </View>} 
     </View> 
    ); 
    } 
} 

Hier ist ein gutes Beispiel von Infinite Red. Tutorial link

Wie für die Separatoren ist es im Grunde ein View mit minimaler Höhe und bestimmter Breite. Ich glaube, du kannst es herausfinden :) Viel Glück!