发表新帖
发表新帖

Render HTML in React Native

前端 未结
关注
6 1167
陌清茗
陌清茗 2020-11-29 04:03

In my React Native app, I am pulling in JSON data that has raw HTML elements like this:

This is some text. Let’s figure out...

相关标签:
6条回答
  • -上瘾入骨i
    2020-11-29 04:11 
     <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

    This worked for me :) I have html text aboutus file.

    0 讨论(0)
  • 抹茶落季
    2020-11-29 04:15

    An iOS/Android pure javascript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it.

    react-native-render-html

    use above library to improve your app performance level and easy to use.

    Install

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

    Basic usage

    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>
        );
    }
}

    PROPS

    you may user it's different different types of props (see above link) for the designing and customizable also using below link refer.

    Customizable render html

    0 讨论(0)
  • 走了就别回头了
    2020-11-29 04:16

    I found this component. https://github.com/jsdf/react-native-htmlview

    This component takes HTML content and renders it as native views, with customisable style and handling of links, etc.

    0 讨论(0)
  • 梦谈多话
    2020-11-29 04:18

    React Native has updated the WebView component to allow for direct html rendering. Here's an example that works for me

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

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />
    0 讨论(0)
  • 星月不相逢
    2020-11-29 04:28

    Edit March 2017: the html prop has been deprecated. Use source instead:

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

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

    Thanks to Justin for pointing this out.

    Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:

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

    Original Answer:

    I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.

    Unfortunately right now there's no way of just directly setting the HTML on this component:

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

    However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.

    0 讨论(0)
  • 挽巷
    2020-11-29 04:36

    i uses Js function replace simply.

    <Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
    0 讨论(0)
 看不清?
提交回复
热议问题