0%

[React Native] 영화 리뷰 모바일 앱 개발 이야기 #4


안녕하세요. 안피곤입니다.

이 시리즈는 리액트 네이티브로 영화 리뷰 모바일 앱을 만드는 과정입니다.

이번에는 포스팅 본문 내용을 보여주는 상세 화면을 구현합니다. body에 포함된 마크다운/HTML을 파싱하여 렌더링된 결과물을 네이티브 화면으로 출력합니다.

웹 화면과 최대한 비슷하게 구현하려고 노력했습니다. 하지만 아직 미흡한 부분이 보여서 WEB으로 가는 링크를 우측상단에 넣었습니다. 클릭하면 웹페이지로 이동합니다.

![](https://cdn.steemitimages.com/200x0/https://cdn.pixabay.com/photo/2019/03/01/05/01/developer-4027334_1280.png)

Remarkable : 마크다운(markdown) 파서

https://github.com/jonschlinkert/remarkable

마크다운(markdown) 파서는 remarkable를 사용했습니다. remarkable는 마크다운 문서를 HTML로 변환해주는 라이브러리입니다. common/extensions 마크다운 문법을 모두 지원하고, syntax 플러그인과 매우 빠른 속도를 자랑합니다. 그리고 MIT 라이센스입니다.

다음은 remarkable를 사용한 일부 코드입니다.


React-Native Render HTML

https://github.com/archriss/react-native-render-html

HTML 렌더링에는 react-native-render-html를 사용했습니다. react-native-render-html는 리액트 네이티브 컴포넌트를 사용하여 HTML을 100% 네이티브 뷰로 렌더링해줍니다. 그리고 BSD-2-Clause 라이센스입니다.

다음은 react-native-render-html를 사용한 일부 코드입니다.

import HTMLView from 'react-native-render-html';


완성 화면


해피 코딩하세요~!


vote, reblog, follow @anpigon

Originally posted on http://steemit.com