React Native中如何在BottomSheet上方创建底部标签导航？

我正在React Native中开发带模糊效果的底部标签导航，需要将其放在BottomSheet上方，但目前导航栏要么会被隐藏，要么只能通过BottomSheet的bottomInset属性调整位置。

BottomSheet组件代码 #

<BottomSheet
      ref={bottomSheetRef}
      visible={bottomSheetVisible}
      onChangeCallback={onChangeCallback}
      enablePanDownToClose={false}
      header={header}
      bottomInset={84} // 借助该属性可将导航置于BottomSheet上方
      style={styles.bottomSheet}
      renderBackdrop={renderBackdrop}>
</BottomSheet>

自定义遮罩（Custom Backdrop） #

const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
  // 动画变量
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [1, 1],
      [1, 1],
      Extrapolate.CLAMP,
    ),
  }));

  // 样式
  const containerStyle = useMemo(
    () => [style, styles.container, containerAnimatedStyle],
    [style, containerAnimatedStyle],
  );

  return (
    <Animated.View style={containerStyle}>
      <View>
        <WalletHomeHeader />
        <WalletHomeCard />
      </View>
      <NavigationBar />
    </Animated.View>
  );
};

export default CustomBackdrop;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
});

标签导航样式（Tab Navigator Style） #

tabBarActiveTintColor: theme.white,
tabBarInactiveTintColor: theme.secondaryGrey,
tabBarStyle: {
  position: 'absolute',
  bottom: 0,
  paddingVertical: scaleHeight(15),
  backgroundColor: convertHexToRGBA(theme.neutral_700, 0.5),
  borderTopWidth: 1,
  borderTopColor: theme.grey,
},

内容的提问来源于stack exchange，提问作者Kumar Shivam