Question

我从api获得html响应，如下所示。我要渲染文本，然后单击响应中给出的文本，然后打开URL。

"Details": "<span style=\"font-family: Georgia; font-size: 24px;\"><em><span style=\"color: #0070c0;\"><a href=\"http://the.company.com/apr19/default.aspx\" target=\"_blank\">Click here to view News.</a></span></em></span>"

Answer 1

您可以将WebView用作HTML渲染器，

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

See official docs here

Answer 2

使用此软件包react-native-render-html

极其可定制且易于使用，旨在能够呈现您扔给它的任何东西。

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

const htmlContent = `
    <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 class Demo extends Component {
    render () {
        return (
            <ScrollView style={{ flex: 1 }}>
                <HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
            </ScrollView>
        );
    }
}

如何在react-native中呈现HTML

2 个答案: