Javascript “反应本机”中“材质底部”选项卡栏中的自定义按钮

我有“创建材质”底部选项卡栏，我想添加自定义按钮，但按钮显示一半

如何显示全圆形按钮。尝试使用绝对位置仍不工作

<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>
        ),
      }}
    />

(
console.log（'Hi'）}
大小={30}/>
),
}}
/>

我尝试了：Custom Component仍然存在相同的问题：

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>
  )
}

constcustomtab=（{children，onPress}）=>{
返回(
)
}

---

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

我认为这对你会有帮助。我看过那段视频，但问题是如果我使用这种方法，我的屏幕内容会在选项卡栏后面。我有很多屏幕，我不想弄乱每个屏幕上的边距底部。