1

ドロップダウンメニューを使用していますhttps://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

デフォルトでは、メニューの最後の項目は透明に設定されていますが、メニューで2つの項目しか使用していないため、2番目の項目が透明になり、ほとんど見えなくなるため、無効にできるかどうか疑問に思っていました.

ドロップダウン メニューをクリックすると、そこに 2 つの項目が表示されます (2 番目の項目はほとんど表示されません)。

4

1 に答える 1

0

残念ながら、これは単純な bool prop などで無効にすることはできません。このオプションは、将来的に追加される可能性があります。とりあえず、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 プラットフォームを使用していない場合は、UI ツールキットからエクスポートされたgetThemeを使用してデフォルトのテーマを取得できます。これにより、解決済みのスタイル オブジェクトが提供され、上から変更をマージできます。次に、を使用して、新しいテーマを現在のテーマとして設定するだけ@shoutem/themeです。

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

Theme.setDefaultThemeStyle(myCustomTheme);

Shoutem プラットフォームを使用している場合は、Rubicon テーマ拡張のデフォルト スタイルをマージする新しいテーマ拡張を作成することで、同じオーバーライドを作成できます。

于 2020-06-03T12:19:16.020 に答える