react-native：反应导航抽屉标签答案

【问题标题】：react-native: react-navigation drawer labelsreact-native：反应导航抽屉标签
【发布时间】：2023-03-27 08:35:01
【问题描述】：

我想在抽屉导航器中有抽屉标签/分隔符。

Somewhat like this

我该怎么做？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

简单。您正在查看的内容称为contentComponent。基本上，您需要将 contentComponent 属性注入到您的抽屉导航器中。

contentComponent 用于呈现抽屉内容的组件，例如导航项。接收抽屉的导航道具。 Read more here

import DrawerContent from '../app/components/DrawerContent'
const drawerConfiguration = {
    initialRouteName: 'MainStackNavigatior',
    headerMode: 'screen',
    drawerWidth: deviceWidth / 1.38,
    contentComponent: DrawerContent
}

contentComponent 只是一个 ScrollView，其中包含可自定义项目的列表。

class DrawerContent extends Component {
  onItemPress(item) {
    const { navigation } = this.props;
    navigation.navigate(item.key);
  }

  renderDrawerItem(route) {
    const { drawerItems } = this.props;
    if (drawerItems.indexOf(route.key) > -1) {
      return (
        <TouchableOpacity style={styles.drawerItem} key={route.key} onPress={() => this.onItemPress(route)}>
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      );
    }
    return null;
  }

  render() {
    const { navigation, isFetching, drawerItemsTitle } = this.props;
    return (
      <View style={styles.container}>
        {!isFetching && <View style={styles.drawerItemTitle}>
          <Text style={styles.drawerItemTitleText}>{drawerItemsTitle}</Text>
        </View>}
        {!isFetching && <View>
          {navigation.state.routes.map(route => this.renderDrawerItem(route))}
        </View>}
        {isFetching && <View style={styles.spinnerViewBg}>
          <View style={styles.spinner}>
            <ActivityIndicator
              size="small"
              animating
            />
          </View>
        </View>}
      </View>
    );
  }
}

这是 Infinite Red 的一个很好的例子。 Tutorial link

至于分隔符，它基本上是一个View，具有最小的高度和一定的宽度。我相信你能弄清楚:) 祝你好运！

【讨论】：