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

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

您需要使用 contentComponent 属性进行自定义更改。查看docs

Answer 3

1. 只需添加此代码：

const Seperator = () => <View style={styles.separator} />; 

在代码的顶部，您希望将部分分隔符/分隔符打开。如果是导航抽屉、菜单、类别等。

1. 添加此样式道具：

  separator: {
    marginVertical: 8,
    borderBottomColor: "#737373",
    borderBottomWidth: StyleSheet.hairlineWidth
  }

1. 在您想要分隔它们的每个部分、菜单、类别代码块之间添加部分分隔符/分隔符，如下所示：

//Block of code of first section/menu/category starts from here

   <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            Herat: The "Academy" of Prince Bay Sunghur (1420-1433)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of first section/menu/category ends here

//Block of code of second section/menu/category starts from here

        <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            Venice, Istanbul, and Herat (15th Century)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of second section/menu/category ends here

//Block of code of third section/menu/category starts from here

        <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            The Age of Bihzad of Herat (1465-1535)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of thirds section/menu/category ends here

Answer 4

如果您使用的是 DrawerItem 组件，您可以使用itemStyle 属性添加样式，如下所示

const props = {
        itemStyle: {
            borderBottomWidth: 1,
            borderColor: '#E2E4E8',
        }
}

<DrawerItems {...props} />

您还可以修改包含所有项目的容器的样式 itemsContainerStyle道具。

在此处查看官方文档。

• 3.x：https://reactnavigation.org/docs/3.x/drawer-navigator#contentoptions-for-draweritems

• 4.x：https://reactnavigation.org/docs/4.x/drawer-navigator#contentoptions-for-draweritems

• 5.x: DrawerContent 是 v.5 中的默认抽屉项 您可以使用 Drawer.Navigator 组件中的drawerContentOptions 对象将道具传递给它。 https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontentoptions

  您还可以使用drawerContent 属性传递自定义抽屉组件。 https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontent

• 6.x: 可以使用drawerContent prop添加自定义组件 https://reactnavigation.org/docs/drawer-navigator#drawercontent

  drawerItem 的样式更改为 https://reactnavigation.org/docs/drawer-navigator#draweritemstyle