Question

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

我该怎么做？

Answer 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，具有最小高度和一定宽度。我相信你可以搞清楚:)祝你好运！

react-native：react-navigation抽屉标签

1 个答案: