react-native-webview and array list-CodePudding

I'm using react-native-webview and another page I can render a static webview like this:

return `<html>
          <head>
          <style>
            .t-center{
              text-align: center;
          </style>
          </head>
          <body>
            <div >
              <h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
              <h1>0000000</h1>
            </div>
          </body>
        </html>`

But now I need to render a list of items from an array inside a webview. I tried using the map but it didn't work:

return items.map((item) => {
  return `<html>
      <head>
      <style>
        .t-center{
          text-align: center;
      </style>
      </head>
      <body>
        <div >
          <h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
          <h1>${item.namE_CLI}</h1>
        </div>
      </body>
    </html>`;
});

CodePudding user response：

here is the solution where you can find the props value injectedJavaScript which helps to inject JavaScript to webview. sample code given below how to add array list to webview.

ex:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  let myList = `["A", "B", "C", "D"]`;

  const overrideJs = `
  let $buttons = $('<div id="buttonGallery">');
   let myList = ${myList}
  let myColors = ["red", "green", "blue", "red"];

  myList.map(function(letter, index) {
    let $button = $("<div></div>")
      .addClass("buttons")
      .attr("id", "button_"   letter)
      .html("<p>"   letter   "</p>")
      .on("mouseenter", function() {
        $(this).css("background", myColors[index]);
      })
      .on("mouseleave", function() {
        if (!$(this).hasClass('clicked')) {
          $(this).css("background", "transparent");
        }
      })
      .on("click", function() {
        $(this).css("background", myColors[index]);
        $(this).addClass('clicked');
      })
    $buttons.append($button);
  });

  $("body").append($buttons);

  $("#done").on("click", clearColor);

  function clearColor() {
    $(".buttons").css({
      backgroundColor: 'transparent'
    });
    $(".buttons").removeClass('clicked');
  }
  `
  const html = `<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style media="screen">
      .buttons {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
  
      #buttonGallery {
        margin: 10px;
        padding: 10px;
        border: solid 2px black;
        width: 155px;
      }
  
      #done {
        width: 150px;
        height: 50px;
        border: solid 2px black;
        text-align: center;
        color: black;
        cursor: pointer;
        background-color: white;
        margin: 2px;
      }
    </style>
  </head>
  
  <body>
  
    <div id="done">
      <p>done</p>
    </div>
  
   
  </body>
  
  </html>
  `
  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}>
      <WebView
        ref={(r) => this.webviewRef = r}
        source={{ html }}
        // onMessage={}
        injectedJavaScript={overrideJs}
        injectedJavaScriptForMainFrameOnly={false}
        allowUniversalAccessFromFileURLs={true}
      />
    </View>
  )


};

export default App;

CodePudding user response：

Thanks Virendrasinh R, your propose is very good! But I found a way to do this with map and toString():

const names = items.map(function (item) {
  return `<div ><span >${item["idcont"]} - ${item["nomE_CLI"]}</span></div>
          <div ><strong>Tipo:</strong> ${item["tipO_CONHECIMENTO"]}</div>
          <div ><strong>Contêiner:</strong> ${item["idcont"]}</div>
          <div ><strong>N:</strong> ${item["numerO_CE_MERCANTE"]}</div>
          <div ><strong>Status:</strong> ${item["status"]}</div>
          <div ><strong>Data Status:</strong> ${item["datA_STATUS"]}</div>
          <div ><strong>Data Prevista:</strong> ${item["dH_PREV_INSPECAO"]}</div>
          <div ><strong>Data Descarga:</strong> ${item["dH_DESCARGA"]}</div>
  `;
});
const html = `
      <html>
      <head>
        <style>
          body{
            padding: 0 25px;
          }

          .row{
            font-size: 38px;
            border-bottom: 1px solid  ${theme.color.gray};
            padding: 10px;
          }

          .last-row{
            margin-bottom: 50px;
          }

          .title{
            color: ${theme.color.success};
            font-size: 48px;
            font-weight: bold;
          }

          strong{
            color: ${theme.color.primary};
          }
        </style>
      </head>
      <body>${names.toString()}</body>
      </html>
`;