如何使用React Navigation在Drawer Side下创建不透明度背景

Question

我正在使用设计进行抽屉导航，但我不知道如何在其下自定义不透明度背景。

Answer 1

要应用模糊（如https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=blur(5px)），您需要使用第三方库，因为默认情况下React Native不支持它。您可以检查这个是否正好处理您需要的https://github.com/react-native-community/react-native-blur

但是，在您发布的打印屏幕上，看起来您希望在激活菜单时使背景变暗。为此，您可以将backgroundColor样式应用于主要组件，其值为rgba(0, 0, 0, 0.25)。或者，您也可以在激活菜单时显示内容中的组件。或者你的菜单容器可以容纳backgroundColor，因为菜单本身不适合整个屏幕（我认为这是最好的选择）。

例：

<View style={{ backgroundColor: rgba(0, 0, 0, 0.25), flex: 1 }}>
  <Menu>
    ...
  </Menu>
</View>

将上面的代码看作是这个想法的表达。您必须应用正确的样式才能制作它

希望能帮助到你