Question

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

Answer 1

正如vonovak所提到的，您可以通过使用contentComponent来实现这一点，const NavigationDrawer = DrawerNavigator({ screen1: { screen: Screen1 }, screen2: { screen: Screen2 }, screen3: { screen: Screen3 }, }, { contentComponent: SideMenu })允许完全自定义抽屉。为此，您需要创建将覆盖默认抽屉的自定义组件。代码示例：

导航抽屉

`

 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>
        );
    }
}

`

自定义组件，它会覆盖默认抽屉（DrawerContainer）

`

{{1}}

`

Answer 2

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

Answer 3

只需添加以下代码：

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

在您想要打开节分隔符/分隔符的代码顶部。如果是导航抽屉、菜单、类别等。

添加此样式道具：

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

在每个部分、菜单、类别代码块之间添加部分分隔符/分隔符，您想像这样将它们分开：

//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

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

3 个答案: