如何在ReactNative的bottomTabNavigator中为barStyle添加模糊

Question

我正在尝试向 React Native BottomTabNavigator 的 barStyle 添加玻璃形态效果，但它不起作用。

import Home from "../screens/Home";
import Browse from "../screens/Browse";
import Library from "../screens/Library";
import Radio from "../screens/Radio";
import Search from "../screens/Search";



const Tab = createMaterialBottomTabNavigator();

const Tabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#1699da"
      inactiveColor="#3e2465"
      barStyle={{ 
          backgroundColor: '#00000040',
          shadowColor: '#1f26875e',
          backdropFilter: blur(7)
          
          
      }}
      labeled={false}
    >

Is this effect possible in ReactNative?

Answer 1

您可以使用不透明度设置玻璃形态效果，但屏幕渲染在底部选项卡上方，因此我们看不到底部选项卡的透明度。

Answer 2

我在这里遇到了同样的问题，经过一番挖掘，我发现您可以在导航器上的

BlurView

内添加

tabBarBackground

。我使用的是expo，所以我导入的库名为`expo-blur'

查看我的代码：

import { BlurView } from 'expo-blur';
import { View } from 'react-native';
....

const MenuBlur = () => {
  return (
    <View style={{ flex: 1 }}>
      <View
        style={{
          width: '100%',
          height: 55,
          borderRadius: 90,
          borderTopColor: 'white',
          borderBottomColor: 'white',
          overflow: 'hidden',
        }}
      >
        <BlurView
          intensity={10}
          style={{ flex: 1, backgroundColor: ' rgba(61, 53, 105, 0.4)' }}
        />
      </View>
    </View>
  );
};

然后在导航器上：

<Navigator
      initialRouteName="home"
      screenOptions={{
        tabBarActiveBackgroundColor: COLORS.MIRAGE[750],
        tabBarInactiveTintColor: COLORS.MIRAGE[900],
        tabBarActiveTintColor: COLORS.WHITE[200],
        tabBarBackground: () => <MenuBlur />,
        tabBarStyle: {
          position: 'absolute',
          marginHorizontal: '17%',
        },
        tabBarItemStyle: {
          borderRadius: 100,
          marginHorizontal: 20,
          height: 50,
          marginTop: 2,
        },
      }}
    >
<Screen ...
...
</Navigator>

这就是它的样子：