React.js
Pocket

React NativeでAPIなどでHTMLコードをとってきて表示させたい場合、WebViewを使ったり、HTMLをレンダーしてくれるライブラリがあり、どちらかになると思います。

ライブラリがいいかなと思ったんですが、どうもうまくいかなかったり、バグがあったりこれというのがありませんでした。。。

そこでWebViewを使うことにして、HTMLにCSSをあてる方法を調べてたどり着いた方法です。

書き方は以下の通り

import React, { Component } from 'react'
import {
  WebView,
  View
} from 'react-native'

export default class App extends Component {
  render () {
    let jscode = `
        var img = document.getElementsByTagName("img");
        var p = document.getElementsByTagName("p");
        for (var i=0;i<img.length;i++){
          img[i].style.minWidth="95%";
          img[i].style.maxWidth="95%";
          img[i].style.height="auto";
          img[i].style.display="block";
          img[i].style.marginLeft="auto";
          img[i].style.marginRight="auto";
        }
        for (var i=0;i<p.length;i++){
          p[i].style.fontFamily='Helvetica Neue';
          p[i].style.fontSize="16";
        }
    `;
    return (
      <View>
        <WebView
          source={{
            // 何かしらの方法でHTMLを
            html: this.state.content
          }}
          injectedJavaScript={jscode}
          style={styles.container}
        />
      </View>
    )
  }
}

getElementsByTagNameでタグを取得して、そのタグそれぞれにスタイルを当てる方法です。要するにJavaScriptでスタイルを当てています。

ちょっと冗長な感じはしますが、とりあえずこれでいけます。

他にいい方法があればぜひ教えてください。

Pocket

カテゴリー: タグ: