javascript - 使用本地 javascript react Native WebView

Question

我将使用 WebView 创建一个 React Native 应用程序。 此 View 必须包含本地 HTML 和 Javascript 文件。 这是代码。

---> WVView.js

...
    render(){
        return (
            <View style={{flex:1}}>
                <StatusBar/>
                <WebView
                    nativeConfig={{props: {webContentsDebuggingEnabled: true}}}
                    ref={webview => { this.myWebView = webview; }}
                    source={require('./Resources/index.html')}
                    javaScriptEnabled={true}
                    injectedJavaScript={} 
                    onMessage={this.onWebViewMessage}
                    style={{flexBasis: 1, flexGrow:1}}
                    scrollEnabled={false}
                    />
            </View>
        );
    }
...

---> index.html

<div class="widget-container">
    <div id="test12"></div>
    <script type="text/javascript" src="./Utils.js"></script> 
    <script type="text/javascript" src="./WebViewBrdge.js"></script>   
    <script type="text/javascript" src="./TVS.js"></script>
</div>

--->目录

|__ WVView.js
|__ Resources
       |__ index.html
       |__ Utils.js
       |__ WebViewBridge.js
       |__ TVS.js

请问，您能否建议开发此解决方案的最佳方法？ 当我阅读文档时，我发现像 source{{html:...}} 或 injectedJavascript 这样的代码用于加载静态本地 javascript。 我没有找到类似的例子。

现在我无法加载 javascript 文件。 谢谢

Answer 1

首先，如果是 android，请将您的文件(资源文件夹本身)添加到 android Assets 目录中，如果是 ios，请添加到 XCode 项目中。
android: "YourApp/android/app/src/main/assets"
ios: "你的应用/ios"

然后在变量中获取该文件夹的路径并将其设置为 baseUrl。
android: "file:///android_asset/Resources"
ios: "资源/"

您可以使用 native 文件路径来加载 html 文件

htmlPath = "file:///android_asset/Resources/index.html"; //file path from native directory;
<WebView
    source={{ uri: htmlPath, baseUrl: baseUrl }}
/>

在此之后，您的脚本将加载到 webview 中。
这是供您引用的链接:https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files