问Blur在Android @react本地社区/blur上不能正常工作

EN

import React from "react";
import {
  Text,
  View,
  ImageBackground,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import { BlurView } from "@react-native-community/blur";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";

import colorsOld from "src/theme/colorsOld";
import colors from "src/theme/colors";

const BottomNavigationTabs: React.FC<BottomTabBarProps> = ({
  descriptors,
  state,
  navigation,
}) => {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  return (
      <View
        style={{
          display: "flex",
          flexDirection: "row",
          backgroundColor: colors.secondaryBg(0.5),
          position: "absolute",
          bottom: 0,
          justifyContent: "space-between",
        }}
      >
        <BlurView
          blurType="light"
          blurAmount={15}
          style={{ height: 85, width: "100%", bottom: 0 }}
        />
        <View style={styles.tabsContainer}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;

            const isFocused = state.index === index;
            const focusedColor = isFocused ? colors.text1 : colorsOld.black;

            //Weird snippet, to render passed icon just call function with any return value, then just set color
            const icon =
              options.tabBarIcon &&
              React.cloneElement(
                //@ts-ignore
                options.tabBarIcon((props: any) => props),
                { color: focusedColor }
              );

            const onPress = () => {
              const event = navigation.emit({
                type: "tabPress",
                target: route.key,
                canPreventDefault: true,
              });

              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: "tabLongPress",
                target: route.key,
              });
            };

            const tabBtn = (
              <TouchableOpacity
                accessibilityRole="button"
                accessibilityState={isFocused ? { selected: true } : {}}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                onPress={onPress}
                style={styles.tabButton}
                onLongPress={onLongPress}
                activeOpacity={0.7}
                key={route.key}
              >
                <View style={styles.tabItem}>
                  <View style={styles.tabItemIcon}>{icon}</View>
                  <Text style={{ ...styles.tabItemLabel, color: focusedColor }}>
                    {label}
                  </Text>
                </View>
              </TouchableOpacity>
            );
            return tabBtn;
          })}
        </View>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 9,
    paddingBottom: 15,
  },
  tabButton: {
    paddingTop: 8,
    paddingBottom: 15,
    paddingHorizontal: 10,
    borderRadius: 10,
    zIndex: 10000,
  },
  tabsContainer: {
    width: "100%",
    left: 0,
    bottom: 0,
    zIndex: 999,
    position: 'absolute',
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
  tabItem: {
    justifyContent: "center",
    alignItems: "center",
  },
  tabItemIcon: {
    marginBottom: 6,
  },
  tabItemLabel: {
    fontSize: 12,
    fontFamily: "Inter-Medium",
  },
});

export default BottomNavigationTabs;