MarkdownのテキストをReact Native側で表示したいケースが出てきました。 リサーチすると一番最初に出てきたのがreact-native-markdownというモジュールです。少し触っていみると、最近のReact Nativeにキャッチアップしてないし、Markdown文法がWIP(Work In Progress)のステータスがあって実際の使用は難しそうでした。
リサーチを続けると、その次に出てきたのがreact-native-showdownというモジュールです。なんとWebviewを使ってMarkdownを描写してしまう代物です。これなら、いけそうな気がしたので導入を決めました。
|
1 |
$ npm install --save react-native-showdown |
でサクッとイントールして、ドキュメント通りに使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from 'react'; import Markdown from 'react-native-showdown'; let Task = React.createClass({ render() { const { task } = this.props; let markdownText = `#${task.title} \n\n${task.description}`; return ( <Markdown body={ markdownText } pureCSS={pureCss} style={{marginTop: 60, marginLeft: 5, marginRight: 5}} /> ); } }); const pureCss = ` *{ color: #333; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } ` export default Task; |
ポイントはpureCSSを差し込むところですね。ES6のTemplate Stringはヒアドキュメントっぽくかけるので便利です。細かい調整はここでできるとおもいます。
Webviewを使うので、Reactっぽさはないですが描写限定で使うには非常に便利だと思います。