反応ネイティブ：反応ナビゲーション用の引き出しラベル

Question

引き出しのナビゲータに引き出しラベル/区切り記号が付いています。

Somewhat like this

私はこれをどのように行うのでしょうか？

Answer 1

簡単。あなたが見ているのはcontentComponentです。基本的には、contentComponent小道具を引き出しナビゲーターに挿入する必要があります。

contentComponentコンポーネント、例えば、ナビゲーションアイテムの引き出しのコンテンツをレンダリングするために使用されます。引き出しのナビゲーション小道具を受け取ります。 contentComponentだけのカスタマイズ可能な項目のリストを含むScrollViewあるRead more here

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

。

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> 
    ); 
    } 
} 

ここは、Infinite Redの良い例です。 Tutorial link

セパレータは基本的には高さと幅が最小のViewです。私はあなたがそれを把握することができると信じて:)幸運！