react-native：react-navigation抽屉标签

Question

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

有点像这样

我该怎么做？

Answer 1

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

contentComponent用于呈现抽屉内容的组件，例如导航项。 接收抽屉的导航道具。 在这里阅读更多

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

这是《无限红》的一个很好的例子。 教程链接

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