如何制作边界的外半径?

我有一些设计,底部导航的中间按钮有这个外半径。

您将如何在自定义底部选项卡栏的React导航样式中编写此内容?

到目前为止,我所拥有的是:

这是我的代码:

export const TabBar = ({ state, descriptors, navigation }) => {
  const { theme } = useTheme();
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 80,
        backgroundColor: theme.colors.white,
        alignItems: 'center',
      }}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          //
        };

        const onLongPress = () => {
          //
        };

        const textColor = isFocused
          ? theme.colors.main.default
          : theme.colors.text.secondary;

        const iconColor = isFocused
          ? theme.colors.main.default
          : theme.colors.black;

        const Icon = Icons[route.name as keyof typeof Icons];

        if (route.name === 'scan') {
          return (
            <View
              key={route.name}
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                position: 'absolute',
                backgroundColor: theme.colors.white,
                borderRadius: 40,
                paddingTop: 20,
                height: 80,
                width: 80,
                top: -32,
                left: Dimensions.get('window').width / 2 - 40,
              }}
            >
              <TouchableOpacity
                accessibilityLabel={options.tabBarAccessibilityLabel}
                accessibilityRole="button"
                accessibilityState={isFocused ? { selected: true } : {}}
                onLongPress={onLongPress}
                onPress={onPress}
                style={{
                  flex: 1,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                testID={options.tabBarTestID}
              >
                <View
                  style={{
                    backgroundColor: theme.colors.main.default,
                    height: 64,
                    width: 64,
                    borderRadius: 32,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <Icon color={theme.colors.white} />
                </View>
                <Typography
                  style={{
                    fontSize: 12,
                    color: textColor,
                    marginTop: 8,
                  }}
                >
                  {label}
                </Typography>
              </TouchableOpacity>
            </View>
          );
        }

        return (
          <TouchableOpacity
            accessibilityLabel={options.tabBarAccessibilityLabel}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            key={route.name}
            onLongPress={onLongPress}
            onPress={onPress}
            style={{
              flex: 1,
              minHeight: 48,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
            testID={options.tabBarTestID}
          >
            <Icon color={iconColor} />
            <Typography
              style={{
                fontSize: 12,
                color: textColor,
              }}
            >
              {label}
            </Typography>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

此外,这种倒边界半径的官方名称是什么?也许这对我的研究有帮助。。。