[英]React Native WebView with local javascript
I'm going to create a React Native app with WebView.我将使用 WebView 创建一个 React Native 应用程序。 This View must contain local HTML and Javascript files.
此视图必须包含本地 HTML 和 Javascript 文件。 This is the code.
这是代码。
---> WVView.js ---> 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 ---> 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>
---> Directory ---> 目录
|__ WVView.js
|__ Resources
|__ index.html
|__ Utils.js
|__ WebViewBridge.js
|__ TVS.js
Please, can you suggest the best way to develop this solution?请问,您能建议开发此解决方案的最佳方法吗? When I read the documentation, I find code like source{{html:...}} or injectedJavascript for loading static local javascript.
当我阅读文档时,我发现诸如 source{{html:...}} 或injectedJavascript 之类的代码用于加载静态本地javascript。 I don't find a similar example.
我没有找到类似的例子。
Now I can't load javascript files.现在我无法加载 javascript 文件。 Thanks
谢谢
First of all add your files(Resources folder itself) in android assets directory in case of android and in XCode project in case of ios.首先,在android的情况下在android资产目录中添加您的文件(Resources文件夹本身),在ios的情况下在XCode项目中添加。
android
: "YourApp/android/app/src/main/assets" android
:“你的应用程序/android/app/src/main/assets”
ios
: "YourApp/ios" ios
:“你的应用程序/ios”
Then take path of that folder in variable and set it as baseUrl.然后在变量中获取该文件夹的路径并将其设置为baseUrl。
android
: "file:///android_asset/Resources" android
:“文件:///android_asset/Resources”
ios
: "Resources/" ios
:“资源/”
You can use native file path to load html file您可以使用本机文件路径加载 html 文件
htmlPath = "file:///android_asset/Resources/index.html"; //file path from native directory;
<WebView
source={{ uri: htmlPath, baseUrl: baseUrl }}
/>
After this your script will get loaded in webview.在此之后,您的脚本将被加载到 webview 中。
Here is the link for your reference: https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files这是供您参考的链接: https : //github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.