MarkdownのテキストをReact Native側で表示したいケースが出てきました。 リサーチすると一番最初に出てきたのがreact-native-markdownというモジュールです。少し触っていみると、最近のReact Nativeにキャッチアップしてないし、Markdown文法がWIP(Work In Progress)のステータスがあって実際の使用は難しそうでした。
リサーチを続けると、その次に出てきたのがreact-native-showdownというモジュールです。なんとWebviewを使ってMarkdownを描写してしまう代物です。これなら、いけそうな気がしたので導入を決めました。
$ npm install --save react-native-showdown
でサクッとイントールして、ドキュメント通りに使用します。
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= />
);
}
});
const pureCss = `
*{
color: #333;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
`
export default Task;
ポイントはpureCSSを差し込むところですね。ES6のTemplate Stringはヒアドキュメントっぽくかけるので便利です。細かい調整はここでできるとおもいます。
Webviewを使うので、Reactっぽさはないですが描写限定で使うには非常に便利だと思います。