ReactNative のカスタマイズ

機能拡張テーマの構成

• 要素の UI スタイルをカスタマイズするために、Host App は、ルート要素 にオプションの prop としてスタイル (プレーン JSON オブジェクト) を渡します <AdaptiveCards/>。

• 現在、テーマ構成では以下の要素がサポートされています。

  • input
  • ボタン
  • 選択セット
  • 日付の選択
  • time picker

• ホスト アプリでは、次の platform-specific 例に示すスタイルを提供できます。 プラットフォーム間で同じスタイルの場合は、プラットフォームを使用せずにスタイルを渡します。

  • スタイルを指定する場合platform-specificiOSは、すべてのプラットフォーム 、、および に対して異なるスタイルを明示的に指定するWindowsAndroid必要があります。 次の例を参照してください。

• 内 color の textTransform および プロパティ button がボタン タイトルに適用されます。 の残りのすべてのスタイルは button 、新しいボタン コンポーネントReact-Native適用されます。

例

この例では、 要素に渡されたスタイル input がすべての button プラットフォームに適用されるのに対し、プラットフォーム固有のスタイルには が適用されます。

    customThemeConfig = {
        input: {
            borderColor: "#000000",
            backgroundColor: "#F5F5F5",
            borderRadius: 4,
            borderWidth: 1,
        },
        button: {
            "ios": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            },
            "android": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            },
            "windows": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            }
        }
    }
    
<AdaptiveCards themeConfig={customThemeConfig} payload={payload} />

既定のテーマ構成

現在、AdaptiveCards は既定で以下のテーマ構成を受け取っています。 ただし、アダプティブ カード開発者は、カスタム テーマ構成を使用して、以下のスタイルをオーバーライドしたり、新しいスタイルを追加したりすることができます。以下の要素に渡すカスタム スタイルは、各コンポーネントでサポートReact-Native注意してください。

さらに、入力要素に placeHolderTextColor 異なるプレースホルダーの色を指定するために、開発者は themeConfig props - で というカスタム スタイルを渡します input, inputDate, and inputTime。

defaultThemeConfig = {
  button: {
    ios: {
      borderRadius: 15,
      backgroundColor: "#1D9BF6",
      color: "white",
      textTransform: "none"
    },
    android: {
      borderRadius: 15,
      backgroundColor: "#1D9BF6",
      color: "white"
    },
    windows: {
      borderRadius: 15,
      backgroundColor: "#1D9BF6",
      color: "white",
      textTransform: "none"
    }
  },
  input: {
    borderColor: "#dcdcdc",
    backgroundColor: "white",
    borderRadius: 5,
    borderWidth: 1
  },
  inputDate: {
    width: "100%",
    height: 44,
    padding: 5,
    borderWidth: 1,
    backgroundColor: "white",
    borderColor: "lightgrey",
    borderRadius: 5
  },
  inputTime: {
    width: "100%",
    height: 44,
    padding: 5,
    borderWidth: 1,
    backgroundColor: "white",
    borderColor: "lightgrey",
    borderRadius: 5
  },
  radioButton: {
    width: 24,
    height: 24,
    activeColor: "#000000",
    inactiveColor: "#404040"
  },
  radioButtonText: {
    marginLeft: 8,
    flexShrink: 1,
    activeColor: "#000000",
    inactiveColor: "#404040"
  },
  checkBox: {
    width: 28,
    height: 28,
    activeColor: "#000000",
    inactiveColor: "#404040"
  },
  checkBoxText: {
    marginLeft: 8,
    flexShrink: 1,
    activeColor: "#000000",
    inactiveColor: "#404040"
  },
  dropdown: {
    ios: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      borderWidth: 1,
      backgroundColor: "white",
      borderColor: "lightgrey",
      borderRadius: 5
    },
    android: {
      borderWidth: 1,
      backgroundColor: "lightgrey",
      borderColor: "lightgrey",
      borderRadius: 5
    },
    windows: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      borderWidth: 1,
      backgroundColor: "white",
      borderColor: "lightgrey",
      borderRadius: 5
    }
  },
  dropdownText: {
    color: "#000000",
    textAlign: "left",
    marginTop: 10,
    marginLeft: 8,
    height: 30
  },
  picker: {
    borderWidth: 1,
    backgroundColor: "lightgrey",
    borderColor: "lightgrey",
    color: "#000000",
    borderRadius: 5,
    marginHorizontal: 2
  },
  dateTimePicker: {
    backgroundColor: "white",
    height: 260,
    width: "100%",
    textColor: "#000000"
  },
  switch: {
     trackColor: undefined, /// Object of type {true: color; false: color} (See RN Docs)
     thumbColor: undefined, 
     ios_backgroundColor: undefined
  }
};