All geek questions in one place

Include external JavaScript file in WebView of React Native

I am trying to include an external JavaScript file inside the WebView of my React Native project. The file I want to include is a third-party library, not available in npm , written in plain JavaScript (without ES5 or higher). I need a solution to enter my JS file into a React Native WebView project without importing it or creating an npm module.

I tried the following methods, but so far nothing works:

This is my external AppGeneral.js :

 function AppGeneral(){ alert("Ok"); } var app = new AppGeneral();

This is my index.ios.js file:

 export default class sampleReactApp extends Component { render() { let HTML = ` <html> <head> <script type="text/javascript" src="js/AppGeneral.js"></script> </head> <body> <div id="workbookControl"></div> <div id="tableeditor">editor goes here</div> <div id="msg" onclick="this.innerHTML='&nbsp;';"></div> </body> </html> `; let jsCode = ` alert("Js"); `; return ( <View style={styles.container}> <WebView style={styles.webView} ref="myWebView" source={{ html: HTML }} injectedJavaScript={jsCode} javaScriptEnabledAndroid={true} > </WebView> </View> ); } }
+2
source share
1 answer

Perhaps you can try combining your JS file as an asset, and then access the file, as in the "native" WebView. Take a look at this answer for Android , and this is for iOS, [ 1 ] and [ 2 ].

0
source

Source: https://habr.com/ru/post/1260349/

More articles:


All Articles