66

私の React Native アプリでは、次のような未加工の HTML 要素を含む JSON データを取得しています。<p>This is some text. Let&#8217;s figure out...</p>

次のように、アプリのビューにデータを追加しました。

<Text>{this.props.content}</Text>

問題は、HTML がそのまま出力され、ブラウザのようにレンダリングされないことです。アプリ ビュー内で、JSON データをブラウザーのように表示する方法はありますか?

4

7 に答える 7

78

2021 年 1 月の編集: React Native ドキュメントでは現在、React Native WebView を推奨しています。

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

を埋め込みたくない場合はWebView、HTML をネイティブ ビューにレンダリングするためのサード パーティ ライブラリもあります。

  1. react-native-render-html
  2. react-native-htmlview

2017 年 3 月の編集: htmlprop は廃止されました。source代わりに使用してください:

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

これを指摘してくれたジャスティンに感謝します。

2017 年 2 月の編集: PR はしばらく前に受け入れられたので、React Native で HTML をレンダリングするには、次のようにします。

<WebView html={'<p>Here I am</p>'} />

元の回答:

これは現時点では不可能だと思います。Text コンポーネントはテキストのみを出力するため、表示されている動作は予期されたものです。HTML を出力する別のコンポーネントが必要です。それがWebViewです。

残念ながら、現時点では、このコンポーネントに HTML を直接設定する方法はありません。

https://github.com/facebook/react-native/issues/506

ただし、この機能の基本バージョンを実装するこの PRを作成したばかりなので、すぐになんらかの形で実装されることを願っています。

于 2015-03-31T09:30:41.930 に答える
16

このコンポーネントを見つけました。https://github.com/jsdf/react-native-htmlview

このコンポーネントは、HTML コンテンツを取得し、カスタマイズ可能なスタイルやリンクの処理などを使用して、ネイティブ ビューとしてレンダリングします。

于 2015-08-18T06:40:31.963 に答える
13

HTML を 100% ネイティブ ビューにレンダリングする純粋な JavaScript 反応ネイティブ コンポーネント。非常にカスタマイズ可能で使いやすいように作られており、投げたものは何でもレンダリングできることを目指しています。

反応ネイティブ レンダリング html

このコンポーネントを使用すると、組み込みの場合と比較して、アプリケーションのメモリ フットプリントとパフォーマンスが向上しますWebViews。

インストール

npm install react-native-render-html --save or yarn add react-native-render-html

基本的な使い方

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <h1>This HTML snippet is now rendered with native components !</h1>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
  <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ html }} />
    </ScrollView>
  );
}

RenderHTML小道具の参照

クラス名、タグを介して要素のスタイルをカスタマイズでき、タグのカスタム レンダリングを登録することもできます。詳細は公式ウェブサイトをご覧ください。

于 2019-02-27T06:46:46.937 に答える
1

React Native は WebView コンポーネントを更新して、HTML の直接レンダリングを可能にしました。ここに私のために働く例があります

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />
于 2016-01-26T22:26:06.513 に答える
1 
 <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

これは私にとってはうまくいきました:)私はhtmlテキストaboutusファイルを持っています。

于 2016-11-25T12:21:35.213 に答える