How to add section divider in navigation drawer us

问题:

Suppose I have five items in drawer navigation. I want to add separator after three items. How to add this using react-navigation.

回答1:

you'll need to use the contentComponent prop to make custom changes. Check out the docs

回答2:

As mentioned vonovak, you could achieve this by using contentComponent which allows complete customization of drawer. For this you will need to create custom component which will override default drawer. Code sample:

• Navigation Drawer

`

 const NavigationDrawer = DrawerNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
  screen3: { screen: Screen3 },
}, {
  contentComponent: SideMenu
})

`

• Custom component which overrides default drawer (DrawerContainer)

`

 class SideMenu extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen1')}
                        style={styles.item}>
                        Page1
                    </Text>
                    // 'separator' line
                    <View
                        style={{
                        borderBottomColor: 'black',
                        borderBottomWidth: 1
                    }}/>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen2')}
                        style={styles.item}>
                        Page2
                    </Text>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen3')}
                        style={styles.item}>
                        Page3
                    </Text>
                </ScrollView>
            </View>
        );
    }
}

`