[RN/HTML] react-native-render-html html에 default color 지정하기

받아오는 데이터 중 백오피스에서 텍스트 편집기로 입력한 데이터는 html로 들어오게 되어

react-native-render-html 라이브러리로 앱에 디스플레이 해주고 있는데,

편집기에서 컬러를 지정하지 않으면 앱에 테마(Light Mode/Dark Mode)에 따라 텍스트 색상이 다르게 적용되어 이슈가 생겼다.

 

해결 방법은 다음과 같다.

 

# solution.

const spanElementModel = HTMLElementModel.fromCustomModel({
  tagName: 'span',
  contentModel: HTMLContentModel.mixed,
  getUADerivedStyleFromAttributes({ face, color, size }) {
    let style = {};
    if (face) {
      style.fontFamily = face;
    }
    if (color) {
      style.color = color;
    } else {
      style.color = 'black';
    }
    if (size) {
      // handle size such as specified in the HTML4 standard. This value
      // IS NOT in pixels. It can be absolute (1 to 7) or relative (-7, +7):
      // https://www.w3.org/TR/html4/present/graphics.html#edef-FONT
      // implement your solution here
    }
    return style;
  },
});

export const customHTMLElementModels = {
  span : spanElementModel,
};

span 태그를 예시로 든 코드이다.

 

color 값이 들어오면 그대로 출력해주고,

만약 color 값이 없다면 black 색상으로 출력해주게 된다.

 

이 파일을 따로 만들어서 renderhtml 을 호출할 때

<RenderHTML
                  source={{ html: htmlData }}
                  contentWidth={Dimensions.get('window').width}
                  customHTMLElementModels={customHTMLElementModels}
                  
                  />

이런식으로 해주면 해결된다.