如何使用反射导航在抽屉​​侧下制作不透明度背景

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>

将上面的代码视为该想法的表达。您必须应用正确的样式才能实现它

希望有所帮助

Answer 2

您可以使用 Drawer Navigator 中的 overlayColor 道具来控制它。

 <Drawer.Navigator
    overlayColor="rgba(0,0,0,0.5)"
    headerMode="none">
    <Drawer.Screen name={ROUTES.HOME} component={HomeStack} />
  </Drawer.Navigator>

有关抽屉定制的更多信息，请参阅此链接。 https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent