ReactNative Anpassung

Erweiterbarkeitsdesignkonfiguration

• Zum Anpassen von Benutzeroberflächenstilen von Elementen kann die Host-App Stile (einfaches JSON-Objekt) als optionale Eigenschaften an das Stammelement übergeben <AdaptiveCards/>.

• Derzeit werden die folgenden Elemente in der Designkonfiguration unterstützt.

  • input
  • aus.
  • Auswahlsatz
  • Datumsauswahl
  • Zeitauswahl

• Host-App kann Stile platform-specific bereitstellen, wie im folgenden Beispiel erwähnt. Übergeben Sie für dieselben Stile plattformübergreifend die Stile ohne die Plattform.

  • Beachten Sie, dass Sie, wenn Sie Stile platform-specificiOSbereitstellen möchten, unterschiedliche Stile für alle Plattformen, Androidund explizit Windows bereitstellen müssen. Das folgende Beispiel finden Sie hier.

• Die color - textTransform Eigenschaft und die - button Eigenschaft in der werden auf den Titel der Schaltfläche angewendet. Alle verbleibenden Stile in gelten button für die React-Native Schaltflächenkomponente.

Beispiel

In diesem Beispiel werden für -Elemente übergebene input Stile auf alle Plattformen angewendet, während button für plattformspezifische Stile angewendet werden.

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

Standarddesignkonfiguration

Derzeit wird für AdaptiveCards standardmäßig die folgende Designkonfiguration verwendet. Der Entwickler adaptiver Karten kann jedoch die folgenden Stile überschreiben oder neue Stile mithilfe der benutzerdefinierten Designkonfiguration hinzufügen. Beachten Sie, dass die benutzerdefinierten Stile, die an die folgenden Elemente übergeben werden, in den jeweiligen React-Native unterstützt werden sollten.

Darüber hinaus können Entwickler einen benutzerdefinierten Stil mit dem Namen in den themeConfig-Eigenschaften übergeben, placeHolderTextColor um eine andere Platzhalterfarbe für die Eingabeelemente zu input, inputDate, and inputTimeerhalten: .

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