react-native中的Material底部标签栏中的自定义按钮

Question

我已经创建了材质底部标签栏，我想添加自定义按钮，我已经在其中添加了但按钮显示一半。

如何显示完整的圆形按钮。尝试使用 Position absolute 仍然无效。

<Tab.Screen
      name="HomeBtn"
      component={HomeStackScreen}
      options={{
        tabBarIcon: () => (
          <View style={{
            position:'absolute',
            bottom:10,
            alignItems:'center',
            justifyContent: 'space-around',
            height:50,
            width:50,
            borderRadius: 25,
            backgroundColor:'green'
          }}>
          <MaterialCommunityIcons 
            name="barcode-scan"
            type = "material-community" 
            reverse
            color={'yellow'}
            reverseColor='black'
            containerStyle={{padding:0,margin:0,elevation:5}}
            onPress={()=>console.log('Hi')}
            size={30}/>
          
        </View>
        ),
      }}
    />

我尝试过：自定义组件仍然是同样的问题：

const CustomTab = ({ children, onPress }) => {
  return (
    <View style={{
      color: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      width: moderateScale(50),
      height: moderateScale(50),
      borderRadius: moderateScale(25),
      backgroundColor: '#62B250',
      marginBottom: moderateScale(60),
      marginHorizontal: moderateScale(5),
      top: -15,
      position: 'absolute'
    }}>
      <Text>
        <Icon name="add" style={{ color: '#fff', fontSize: 30 }} />
      </Text>
    </View>
  )
}

两种方法都有相同的问题，即半按钮。