Is it possible to load a static react native page in a webview?-CodePudding

The content of my Next js app is not being loaded in my WebView.

I have a simple next js app that i want to load as static file in a WebView. To do that i ran:

npx next build 
npx next export

then i copied the newly created /out folder in my React-Native app. ( For android android/app/src/main/assets/out ).

This is the index.html file:

<!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>

The <h1>Hello there</h1> gets rendered, i added it to see if the index.html file is found.

In src="./_next/static/chunks/pages/index-7da29ff49b69596f.js" is a <div>hi</div> which doesn't get rendered, i put it there to test if it loads the files at all.

This is how i load the WebView:

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

What am i doing wrong? Is this even possible?

CodePudding user response：

You can use props call injectedjavascript from react-native-webview

CodePudding user response：

I have also tried the same. But it didn't work for me. Cause the index.html file generated from next/react build doesn't behave like regular html file you can open with browser. In order to render the html file you will need a server. I would like to suggest that you host the file in a server and use the url or try to create a local server in the native device on app startup and use the url (though it is not tested, just a theory). Good luck.