반응 네이티브 : 반응 네비게이션 서랍 라벨

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입니다. 나는 당신이 그것을 이해할 수 있다고 생각합니다 :) 행운을 빌어 요!