ReactNative 사용자 지정

확장성 테마 구성

• 요소의 UI 스타일을 사용자 지정하기 위해 호스트 앱은 스타일(일반 JSON 개체)을 루트 요소 <AdaptiveCards/>에 선택적 소품으로 전달할 수 있습니다.

• 현재 아래 요소는 테마 구성에서 지원됩니다.

  • input
  • 선택합니다.
  • 선택 집합
  • 날짜 선택기
  • 시간 선택기

• 호스트 앱은 아래 예제에 설명된 대로 스타일을 제공할 platform-specific 수 있습니다. 플랫폼 간에 동일한 스타일의 경우 플랫폼 없이 스타일을 전달합니다.

  • 스타일을 제공 platform-specific 하려는 경우 모든 플랫폼 iOSAndroidWindows 에 대해 다른 스타일을 명시적으로 제공해야 합니다. 아래 예제를 찾습니다.

• 단추 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에서 호출된 placeHolderTextColor 사용자 지정 스타일을 전달할 수 있습니다. 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
  }
};