以前React NativeのMarkdown用ライブラリを比較しました。
そのときに見落としていて試してなかったライブラリがなかなか良さそうでしたので、こちらのサンプルアプリにいれてみました。
react-native-render-html
新しく使ってみたのはこのライブラリです。
サンプルアプリではこんな感じになりました。
なかなか良さそう。
react-native-htmlview
ちなみに、よく引き合いに出すreact-native-htmlviewはこんな感じ。
今回の差分です。
https://github.com/pi-chan/ReactNativeMarkdownSample/commit/56ed99c4dd45f81d82aa6b0d0682867d3701d83d
使い方部分だけ抜粋すると↓こんな感じでした。
1import React, { Component } from 'react';
2import { Dimensions, ScrollView, Linking } from 'react-native';
3import HTML from 'react-native-render-html';
4
5const { width } = Dimensions.get('window');
6
7export default class RenderHtmlScreen extends Component {
8 static navigationOptions = {
9 title: 'react-native-render-html',
10 };
11
12 render() {
13 const html = this.props.navigation.getParam('html')
14 return (
15 <ScrollView style={{padding: 10}}>
16 <HTML
17 html={html}
18 imagesMaxWidth={width * 0.9}
19 onLinkPress={(evt, href) => { Linking.openURL(href) }}
20 />
21 </ScrollView>
22 );
23 }
24}