如何将自定义组件添加到抽屉导航

Question

我正在尝试将自定义组件添加到我的React Navigation v4中： 这是我的代码：

const MainNavigator = createDrawerNavigator(
  {
    MapProfile: {
      screen: MapProfileTabNavigator,
      navigationOptions: {
        drawerLabel: "Maps",
      },
    },

    SportCentersList: SportCentersListNav,
    TermsAndConditions: TermsAndConditionsNavigator,
    About: AboutScreenNavigator,
  },
  {
    contentComponent: customDrawerComponent,
  }
);

我有一个customDrawerComponent，它像这样制作成一个组件：

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import SafeAreaView from "react-native-safe-area-view";
import { DrawerItems } from "react-navigation-drawer";

const customDrawerComponent = (props) => {
  return (
    <ScrollView>
      <SafeAreaView
        style={styles.container}
        forceInset={{ top: "always", horizontal: "never" }}
      >
        <DrawerItems {...props} />
      </SafeAreaView>
    </ScrollView>
  );
};

export default customDrawerComponent;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

但是我有一个空白的抽屉，有什么想法吗？

但是抽屉保持不变，有什么想法我做错了吗？