PIYO - Tech & Life -

React NativeでのMarkdownライブラリまとめをアップデート

ReactNative Markdown

以前React NativeのMarkdown用ライブラリを比較しました。

https://blog.piyo.tech/posts/2018-07-12-markdown-on-react-native/

そのときに見落としていて試してなかったライブラリがなかなか良さそうでしたので、こちらのサンプルアプリにいれてみました。

https://github.com/pi-chan/ReactNativeMarkdownSample

react-native-render-html

新しく使ってみたのはこのライブラリです。

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

サンプルアプリではこんな感じになりました。

なかなか良さそう。

react-native-htmlview

ちなみに、よく引き合いに出すreact-native-htmlviewはこんな感じ。

今回の差分です。

https://github.com/pi-chan/ReactNativeMarkdownSample/commit/56ed99c4dd45f81d82aa6b0d0682867d3701d83d

使い方部分だけ抜粋すると↓こんな感じでした。

import React, { Component } from 'react';
import { Dimensions, ScrollView, Linking } from 'react-native';
import HTML from 'react-native-render-html';

const { width } = Dimensions.get('window');

export default class RenderHtmlScreen extends Component {
  static navigationOptions = {
    title: 'react-native-render-html',
  };

  render() {
    const html = this.props.navigation.getParam('html')
    return (
      <ScrollView style={{padding: 10}}>
        <HTML
          html={html}
          imagesMaxWidth={width * 0.9}
          onLinkPress={(evt, href) => { Linking.openURL(href) }}
        />
      </ScrollView>
    );
  }
}