如何在@shoutem/ui下拉菜单中将最后一项设置为不透明?

Question

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

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

当我单击我的下拉菜单时，您可以在那里看到 2 个项目(几乎看不到第二个(

Answer 1

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

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

在这两种情况下，您都需要覆盖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 平台，则可以使用getTheme，该主题从 UI 工具包导出以获取默认主题。这将为您提供已解析的样式对象，您可以将上面的更改合并到该对象中。然后，只需使用@shoutem/theme将新主题设置为当前主题;

import { Theme } from '@shoutem/theme';
Theme.setDefaultThemeStyle(myCustomTheme);

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