以前React NativeのMarkdown用ライブラリを比較しました。
GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemottyでもMarkdownのような記法を一部サポートしています。
そのときに見落としていて試してなかったライブラリがなかなか良さそうでしたので、こちらのサンプルアプリにいれてみました。
Contribute to pi-chan/ReactNativeMarkdownSample development by creating an account on GitHub.
react-native-render-html
新しく使ってみたのはこのライブラリです。
iOS/Android pure javascript react-native component that renders your HTML into 100% native views - GitHub - meliorence/react-native-render-html: iOS/Android pure javascript react-native component that renders your HTML into 100% native views
サンプルアプリではこんな感じになりました。
なかなか良さそう。
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>
);
}
}