ReactNative 自訂

擴充性主題設定

• 若要自訂專案的 UI 樣式，主機應用程式可以傳遞樣式 (純 JSON 物件) 做為根項目 <AdaptiveCards/> 的選擇性內容。

• 主題設定中目前支援下列元素。

  • input
  • 按鈕
  • choice 組
  • 日期選擇器
  • 時間選擇器

• 主機應用程式可以提供 platform-specific 如下列範例所述的樣式。 針對不同平臺的相同樣式，請在不需要平臺的情況下傳遞樣式。

  • 請注意，如果您想要提供 platform-specific 樣式，則必須為所有平臺 iOS 、 Android 和 Windows 明確提供不同的樣式。 請尋找下列範例。

• color中 button 的和 textTransform 屬性會套用至按鈕標題。 中 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 元件中，應支援傳遞至下列元素的自訂樣式。

此外，若要為輸入元素提供不同的預留位置色彩，開發人員可以傳遞在 themeConfig .props input, inputDate, and inputTime 中呼叫 placeHolderTextColor 的自訂樣式。

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
  }
};