在 React Native 中渲染本地 html 文件答案

【问题标题】：Render local html file in React Native在 React Native 中渲染本地 html 文件
【发布时间】：2020-05-30 17:24:51
【问题描述】：

我使用 Expo for android 运行 React Native，并尝试在本地目录中呈现 html 文件（它显示 map 图像），但它无法正常工作。

我遵循了几个参考，在 expo 和 npm 中都安装了 webview 依赖项。

问题是结果只是html代码视图，而不是地图图像

请在下面查看我的结果：

我的反应原生代码是这样的（非常简单）：

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

const testHtml = require('./arcgis/arc1.html');

export default function App() {

  return (
    <WebView source={testHtml} startInLoadingState
    scalesPageToFit
    javaScriptEnabled
    style={{ flex: 1 }}/>
  );

}

当我在在线html网站编译html文件时，它看起来像这样：

左 - html 代码，右 - 结果

这个 html 文件只是来自官方 gis 网站的示例文件，所以我猜我的 react native 代码一定是错误的。

我该如何解决这个问题？

谢谢。

【问题讨论】：

你可以看github.com/react-native-community/react-native-webview/issues/…
您的参考对我有很大帮助！我遵循了一些代码，现在没有文本视图，但我仍然看不到底图图像。它只显示按钮和版权文本...... .
source={Platform.OS == 'ios' ? WebViewBasic : { uri: "file:///android_asset/WebViewBasic.html" }}
ios 和 android 的处理方式应该不同

标签： html react-native webview

【解决方案1】：

你必须使用这个模块来渲染 html。

https://github.com/archriss/react-native-render-html

编辑：Instead of using HTML file store your HTML into a .js file 并像这样导出

export const MyHTML =
    `<p>Here is an <em>ul</em> tag</p>
    <ul>
        <li>Easy</li>
        <li>Peasy</li>
        <li><div style="background-color:red;width:50px;height:50px;"></div></li>
        <li>Lemon</li>
        <li>Squeezy</li>
    </ul>
    <br />
    <p>Here is an <em>ol</em> tag</p>    
    <ol>
        <li>Sneaky</li>
        <li>Beaky</li>
        <li>Like</li>
    </ol>
`;

然后将 MyHTML 传递给 yoru HTML 渲染器。

【讨论】：

我已经尝试过了，但这些示例仅使用 html 文本，例如“
Some Dummy HTML code
”。我需要在本地目录中使用 .html 文件显示。你能给我举个例子吗？谢谢
我已对我的答案进行了编辑，请看一下。
我尝试了你的建议。现在它看起来像官方网站许可证和按钮视图。我会找到其他不使用 html 的方法。还是谢谢！

【解决方案2】：

你可以使用react-native-webview来渲染html文件。

这是一个例子

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

const myHtmlFile = require("./my-asset-folder/local-site.html");

class MyWeb extends Component {
  render() {
    return (
      <WebView source={myHtmlFile} />
    );
  }
}

【讨论】：

这正是问题中的代码，看不出有什么帮助

【解决方案3】：

如果您使用 react-native CLI，则必须将本地 HTML 文件放置在 ios 和 android 本地的特定文件夹中。这意味着您将有两个 indez.html 文件：请参阅 - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/

对于世博，我使用了这种方法：

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

const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
    <li>Easy</li>
    <li>Peasy</li>
    <li><div style="background-color:red;width:50px;height:50px;"></div></li>
    <li>Lemon</li>
    <li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>    
<ol>
    <li>Sneaky</li>
    <li>Beaky</li>
    <li>Like</li>
</ol>
`;

const Screen = () => {
  return (
    <WebView
      originWhitelist={["*"]}
      source={{
        html: MyHtmlFile,
      }}
  
    />
  );
};

export default Screen;

const styles = StyleSheet.create({});

【讨论】：