是否可以在 webview 中加载 static 反应本机页面？

Question

我的 Next js 应用程序的内容未加载到我的 WebView 中。

我有一个简单的下一个 js 应用程序，我想将它作为 static 文件加载到 WebView 中。 为此，我跑了：

npx next build 
npx next export

然后我在我的 React-Native 应用程序中复制了新创建的/out文件夹。 （对于 android android/app/src/main/assets/out）。

这是 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <noscript data-n-css=""></noscript>
    <script
      defer=""
      nomodule=""
      src="./_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
    ></script>
    <script
      src="./_next/static/chunks/webpack-434fefa8f39d8fbc.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/framework-0e90cbf53d3785fb.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/main-f65e66e62fc5ca80.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/pages/_app-d147581f7d5a26ef.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/ffe6318b-78fdf1aa1284bb62.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/d9fcd7e1-1af5f391065d9528.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/957d5091-e6e13748ee910e93.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/91ed190f-8481ca3f0c149074.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/fec483df-e3f27fc2944a8470.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/8015bd09-8f6407b97da9214f.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/705-03f6e1a04c95ed80.js"
      defer=""
    ></script>
    <script
      src="./_next/static/chunks/pages/index-7da29ff49b69596f.js"
      defer=""
    ></script>
    <script
      src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_buildManifest.js"
      defer=""
    ></script>
    <script
      src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_ssgManifest.js"
      defer=""
    ></script>
    <script
      src="./_next/static/gF9J6oBqA-HcXJwf93Cir/_middlewareManifest.js"
      defer=""
    ></script>
  </head>
  <body>
    <h1>Hello here</h1>
    <div id="__next" data-reactroot=""><div></div></div>
    <script id="__NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/",
        "query": {},
        "buildId": "gF9J6oBqA-HcXJwf93Cir",
        "nextExport": true,
        "autoExport": true,
        "isFallback": false,
        "scriptLoader": []
      }
    </script>
  </body>
</html>

<h1>Hello there</h1>被渲染，我添加它以查看是否找到 index.html 文件。

在src="./_next/static/chunks/pages/index-7da29ff49b69596f.js"是一个没有被渲染的<div>hi</div> ，我把它放在那里测试它是否加载了文件.

这就是我加载 WebView 的方式：

 <WebView
      ref={webviewRef}
      scalesPageToFit={false}
      mixedContentMode="compatibility"
      onMessage={onMessage}
      originWhitelist={['*']}
      javaScriptEnabled={true}
      source={{
        uri: 'file:///android_asset/out/index.html',
      }}
    />

我究竟做错了什么？ 这甚至可能吗？

Answer 1

您可以使用来自 react-native-webview 的 props 调用注入的javascript

Answer 2

我也尝试过同样的方法。 但这对我不起作用。 因为从next/react build生成的index.html文件的行为与您可以使用浏览器打开的常规 html 文件不同。 为了呈现 html 文件，您需要一个服务器。 我想建议您将文件托管在服务器中并使用 url 或尝试在应用程序启动时在本机设备中创建本地服务器并使用 url（虽然它没有经过测试，只是一个理论） 。 祝你好运。

是否可以在 webview 中加载 static 反应本机页面？

问题描述

2 个解决方案

解决方案1
0 2022-08-23 13:51:21

解决方案2
0 2022-08-23 14:21:09

是否可以在 webview 中加载 static 反应本机页面？

问题描述

2 个解决方案

解决方案1 0 2022-08-23 13:51:21

解决方案2 0 2022-08-23 14:21:09

解决方案1
0 2022-08-23 13:51:21

解决方案2
0 2022-08-23 14:21:09