我有一个单orepo，我有web和mobile应用程序(分别是React和React Native)，并希望使用React Native WebView将web应用程序嵌入到移动设备中。
我在文档中读到WebViewsource可以是文件URL或静态HTML页面，所以它期望传递的源是这样的:
<WebView source={{ uri: 'https://my-web-app/' }} />
但我只有web应用程序的dist/文件夹。是否有办法通过app.js和app.css从dist/*文件夹到WebView?
我也假设也许Metro捆绑器可以使用这些文件创建一些HTML页面，然后该页面将传递给WebView，但不太确定这是否可能。
所以我按照这里建议的方法，也就是本文的简短版本。
我所做的基本上如下:
- 在
mobile中创建 - 将所有css和js文件放入
html/Web.bundle/src/index.html文件中，大致如下所示:
html/Web.bundle/src/web-src文件夹<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="web-src/app.css" />
</head>
<body>
<script src="web-src/app.js"></script>
</body>
</html>
- 创建
WebViewRenderer.tsx文件来呈现WebView，并提供index.html文件作为WebView的源文件:
const WebViewRenderer = () => {
const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/index.html'
return (
<WebView
source={{ uri: sourceUri }}
originWhitelist={['*']}
onLoad={() => console.log('Loaded')}
onError={() => console.error('An error has occurred')}
onHttpError={() => console.error('An HTTP error has occurred')}
onMessage={(msg) => console.log('Got a message', msg)}
javaScriptEnabled={true}
allowFileAccess={true}
injectedJavaScript={injectedJS}
/>
)
}
就是这样——现在网页内容在WebView中呈现了。
我建议你看一看原文，因为它更详细地解释了所有内容，并且还包含了关于配置和边缘情况的重要信息(例如将查询参数从移动设备传递到web)。