@shoutem/ui DropDownMenu 如何设置最后一项不透明？

Question

我正在使用下拉菜单 https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

默认情况下，菜单中的最后一项设置为透明，我想知道我是否可以禁用它，因为我只使用菜单中的 2 个项目，它使我的第二个项目变得透明，几乎看不到。

when i click my drop down menu and you can see the 2 items there (second is barely seen)

Answer 1

恐怕这不能通过简单的 bool 道具或类似道具来禁用。这个选项很可能是将来添加的东西。现在，我建议您尝试编辑 UI 工具包的主题。

如果您使用的是 Shoutem 平台，则可以创建可在您的应用中使用的自定义主题（作为新的自定义扩展）。如果没有，您可以手动定义默认的 UI 工具包主题，您可以在其中 "disable" 此渐变。

在这两种情况下，您都需要覆盖 DropDownModal 组件主题样式。

这是传递给组件的默认主题样式。

  'shoutem.ui.DropDownModal': {
    modal: {
      'shoutem.ui.Button.close': {
        'shoutem.ui.Icon': {
          color: changeColorAlpha(variables.subtitle.color, 0.5),
          fontSize: 24,
        },

        position: 'absolute',
        bottom: 25,
        left: 0,
        right: 0,
      },

      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 20,
      backgroundColor: changeColorAlpha(variables.backgroundColor, 0.97),
    },

  ....
  },

您可以为覆盖此特定样式的工具包定义一个新主题属性。所以你可以传递类似

的东西

  'shoutem.ui.DropDownModal': {
    modal: {
      backgroundColor: 'transparent',
    },
  },

我们使用 backgroundColor 属性来设置实际下拉菜单上方的叠加层的样式。

如果您不使用 Shoutem 平台，您可以使用从 UI 工具包导出的 getTheme 来获取默认主题。这将为您提供已解析的样式对象，您可以将上面的更改合并到其中。然后，只需使用 @shoutem/theme;

将新主题设置为当前主题即可

import { Theme } from '@shoutem/theme';

Theme.setDefaultThemeStyle(myCustomTheme);

如果您使用的是 Shoutem 平台，您可以创建相同的覆盖，方法是创建一个新的主题扩展，合并来自 Rubicon 主题扩展的默认样式。

@shoutem/ui DropDownMenu 如何设置最后一项不透明？

How to set the last items not to be transparent in @shoutem/ui DropDownMenu?

user-interface

react-native

shoutem