Show html tag stored in JSON in a mobile app-CodePudding

I've developed a system in laravel in which I've stored some data with HTML Tags. Data is stored using the WYSIWYG plugin. (Designed the API system in laravel as well). Now I want to design an app for the same. I've basic app development knowledge in java, but I want to move to a hybrid one so react-native, kotlin, or flutter may be best suited. As I know react so react-native is preferable by me.

So the basic question is whether they support displaying HTML tags on the App. What am I thinking is that react-native is basically react which supports HTML, but have no idea.

What I found is that I can use webView for the purpose by the following link: Html Tags in Xamarin App

Please guide me through this.

As I mentioned, I have to learn first them build the required app so this one is really helpful in selecting the right stack for the purpose.

Thank you for your time and support.

CodePudding user response：

You can use Html to show HTML content. And you should implement Html.ImageGetter

Spanned spanned = Html.fromHtml(htmlContent, this, null);
textView.setText(spanned);

Html.ImageGetter is to load images from HTML content.

@Override
public Drawable getDrawable(String source)

Here you can load and show images.

CodePudding user response：

Flutter supports HTML rendering. Please try this Flutter plugin https://pub.dev/packages/flutter_html/install flutter_html: ^0.11.1 It allows basic rendering of HTML content into Flutter widget tree

Container(
          child: Html(
            padding: EdgeInsets.zero,
            data:
                "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><b> Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Arcu odio ut sem nulla pharetra diam. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus </b>. Commodo odio aenean sed adipiscing. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Sit amet dictum sit amet justo. Enim lobortis scelerisque fermentum dui faucibus. Tempus urna et pharetra pharetra massa massa ultricies. Neque egestas congue quisque egestas diam in arcu cursus. Potenti nullam ac tortor vitae.<br><i> Velit dignissim sodales ut eu sem. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Amet commodo nulla facilisi nullam. In eu mi bibendum neque egestas congue quisque egestas. Egestas fringilla phasellus faucibus scelerisque. Dictum fusce ut placerat orci. Magna ac placerat vestibulum lectus mauris ultrices eros. Fames ac turpis egestas sed tempus.</i></p>",
            customTextAlign: (dom.Node node) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "p":
                    return TextAlign.left;
                }
              }
              return null;
            },
            customTextStyle: (dom.Node node, TextStyle baseStyle) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "p":
                    return baseStyle.merge(
                      TextStyle(
                        fontStyle: FontStyle.normal,
                        fontSize: 15.0,
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                      ),
                    );
                  case "b":
                    return baseStyle.merge(
                      TextStyle(
                        fontStyle: FontStyle.normal,
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    );
                  case "i":
                    return baseStyle.merge(TextStyle(
                      fontStyle: FontStyle.italic,
                      fontSize: 15.0,
                      fontWeight: FontWeight.normal,
                      color: Colors.black,
                    ));
                }
              }
              return baseStyle;
            },
          ),
        ),