React native 在导航抽屉v5中的Navigator.Screen之间插入元素

我无法确定如何在导航器之间插入自定义元素。React Navigation Drawer版本5（最新版本）中的屏幕元素。我可以创建自定义元素，但它们默认显示在屏幕底部

const Divider = () => {
  return <View style={styles.divider}></View>;
};

const styles = StyleSheet.create({
      divider: {
        backgroundColor: "white",
        marginVertical: 10,
        opacity: 0.25,
        height: 5,
        width: 150,
        borderRadius: 4,
      },
    });


function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />

      <Divider />
      
    </DrawerContentScrollView>
  );
} 
const Drawer = createDrawerNavigator();

function MainNavigation() {
  return (
    <Drawer.Navigator
      initialRouteName="Notifications"
      drawerPosition="right"
      drawerType="slide"
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      hideStatusBar="true"
      overlayColor="transparent"
      drawerContentOptions={{
        activeTintColor: Color.white,
        inactiveTintColor: Color.white,
        contentContainerStyle: {
          marginTop: 50,
          flexDirection: "column",
          alignItems: "center",
        },
        itemStyle: {
          height: 45,

          width: 175,
          alignContent: "center",
          justifyContent: "center",
          flexDirection: "column",
          flex: 1,
          marginVertical: -2,
        },
        labelStyle: {
          fontFamily: FontType.medium,
          fontSize: 15,
        },
      }}
      drawerStyle={{
        backgroundColor: Color.blue,
        flexDirection: "column",
        justifyContent: "center",
        paddingLeft: -20,
        width: 175,
      }}
      screenOptions={{ swipeEnabled: false }}
    >
      <Drawer.Screen name="Progress" component={NotificationsScreen} />
      <Drawer.Screen name="Buddies" component={NotificationsScreen} />

      <Drawer.Screen name="Trainers" component={NotificationsScreen} />
      <Drawer.Screen name="Daily Check In" component={NotificationsScreen} />
      <Drawer.Screen name="Rewards" component={NotificationsScreen} />

      <Drawer.Screen name="Settings" component={NotificationsScreen} />
      <Drawer.Screen name="Log Out" component={NotificationsScreen} />
    </Drawer.Navigator>
  );
}

const Divider=（）=>{
返回；
};
const styles=StyleSheet.create({
分隔器：{
背景颜色：“白色”，
玛吉：10，
不透明度：0.25，
身高:5,，
宽度：150，
边界半径：4，
},
});
功能CustomDrawerContent（道具）{
返回(
);
} 
const Drawer=createDrawerNavigator（）；
函数MainNavigation（）{
返回(
}
hideStatusBar=“true”
OverlyColor=“透明”
抽屉内容选项={{
activeTintColor:Color.white，
颜色：Color.white，
contentContainerStyle：{
玛金托普：50，
flexDirection:“列”，
对齐项目：“中心”，
},
项目样式：{
身高：45，
宽度：175，
内容：“中心”，
辩护内容：“中心”，
flexDirection:“列”，
弹性：1，
边缘化：-2，
},
标签样式：{
fontFamily:FontType.medium，
尺寸：15，
},
}}
抽屉式={{
背景颜色：Color.blue，
flexDirection:“列”，
辩护内容：“中心”，
paddingLeft:-20，
宽度：175，
}}
screenOptions={{swipEnabled:false}
>
);
}

这就是它现在的样子：

我希望它像这样：

---

如果使用DroperItemList，请使用自定义样式创建您自己的元素。如果使用DroperItemList，请使用自定义样式创建您自己的元素。