react-native - 在 ReactNative 抽屉菜单中处理图像之间的空间

Question

我'@react-navigation/drawer'用来显示左侧抽屉菜单。我在这里附上屏幕截图。 问题是，在顶部图像和实际菜单之间，存在我无法自定义/缩小的差距。 此外，屏幕截图底部的图标和注销文本上的间隙也是不可自定义的。 这是我的抽屉顶部图像和菜单的代码。在代码的底部，查看注销选项。

<SafeAreaView style={{ flex: 1 }}>
 <Image
  source={{ uri: BASE_PATH + proileImage }}
  style={{resizeMode: 'center', width: 100, height: 100,
    borderRadius: 100 / 2, alignSelf: 'center',}}
 />
 <DrawerContentScrollView {...props}>
  <DrawerItemList {...props} labelStyle={{fontFamily: Fonts.regular, fontSize: 14,
    fontWeight: '700', color: '#37383C'}} />
 </DrawerContentScrollView>
 <DrawerItem labelStyle={styles.menuLabel}
  icon={({ focused, color, size }) => <Icon type='MaterialCommunityIcons' name={'logout'}        color={color} />}
  label="Logout"
  onPress={logout}
 />
</SafeAreaView>

标签： react-nativenavigation-drawerreact-navigation-drawer

Answer 1

     import {useSafeAreaInsets} from 'react-native-safe-area-context';

     //Use this hook
     const insets = useSafeAreaInsets();

     //Use this as an style

     contentContainerStyle={{
        paddingTop: insets.top,
        paddingStart: insets.left,
        paddingEnd: insets.right,
      }}