React NativeでMarkdownを描写する

MarkdownのテキストをReact Native側で表示したいケースが出てきました。 リサーチすると一番最初に出てきたのがreact-native-markdownというモジュールです。少し触っていみると、最近のReact Nativeにキャッチアップしてないし、Markdown文法がWIP(Work In Progress)のステータスがあって実際の使用は難しそうでした。

リサーチを続けると、その次に出てきたのがreact-native-showdownというモジュールです。なんとWebviewを使ってMarkdownを描写してしまう代物です。これなら、いけそうな気がしたので導入を決めました。

でサクッとイントールして、ドキュメント通りに使用します。

ポイントはpureCSSを差し込むところですね。ES6のTemplate Stringはヒアドキュメントっぽくかけるので便利です。細かい調整はここでできるとおもいます。

Webviewを使うので、Reactっぽさはないですが描写限定で使うには非常に便利だと思います。

Scroll to top