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

Question

我想在抽屉导航器中添加抽屉 labels/separators。

Somewhat like this

我该怎么做？

Answer 1

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

contentComponent Component used to render the content of the drawer, for example, navigation items. Receives the navigation prop for the drawer. 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，高度最小，宽度一定。相信你能想出来:)祝你好运！

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

react-native: react-navigation drawer labels

reactjs

react-native

react-navigation