如何使用反应导航在导航抽屉中添加节分隔符

Question

假设我在抽屉导航中有五个项目.我想在三个项目之后添加分隔符.如何使用react-navigation添加它.

Answer 1

正如前面提到的 vonovak，您可以通过使用contentComponent它来实现抽屉的完全自定义。为此，您需要创建自定义组件来覆盖默认抽屉。代码示例：

• 导航抽屉

`

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

`

• 覆盖默认抽屉的自定义组件（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>
        );
    }
}

`

Answer 2

您需要使用contentComponentprop 来进行自定义更改。查看文档