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

Question

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

Answer 1

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

Answer 2

如 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 3

只需添加此代码：

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

在您希望包含 divider/separator 部分的代码顶部。如果它是导航抽屉、菜单、类别等

添加此样式道具：

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

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

//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 属性添加自定义组件 https://reactnavigation.org/docs/drawer-navigator#drawercontent

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

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

How to add section divider in navigation drawer using react navigation

react-native

react-navigation