Reputation: 21
I am developing an App that needs to send variables to an html page that will be displayed in a WebView. Here is a basic example of the React Native Application code.
export default class App extends Component {
render()
{
let variableCadena="React Native";
return(
<Container>
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={{uri:'file:///android_asset/PaginaEjemplo.html'}}
style={{ marginTop: 20 }}
javaScriptEnabled={true}
domStorageEnabled={true}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
injectedJavaScript={variableCadena}
>
</WebView>
</Container>
);
}
};
The HTML can be as simple as the following one.
<html>
<head>
<title>Ejemplo de inyeccion desde React Native</title>
<script type="text/javascript">
var variable = variableCadena;
</script>
</head>
<body>
<script type="text/javascript">
document.body.innerHTML = "<h1>La variable es:"
+variable+ "</h1>"
</script>
</body>
</html>
The result that is expected is that the web page shows in the h1 tags the React Native text that was defined in the application. Thank you all for your suggestions.
Upvotes: 2
Views: 1697
Reputation: 9885
First of all, I hope you are using https://github.com/react-native-community/react-native-webview instead of the from react-native because it's now being deprecated.
You can use the injectJavascript(...)
method. Something like this...
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const run = `
document.body.style.backgroundColor = 'blue';
true;
`;
setTimeout(() => {
this.webref.injectJavaScript(run);
}, 3000);
return (
<View style={{ flex: 1 }}>
<WebView
ref={r => (this.webref = r)}
source={{
uri: 'https://stackoverflow.com/questions/57065527',
}}
/>
</View>
);
}
}
that will give you something like this:
Now work around that! Check the snack: https://snack.expo.io/@abranhe/stackoverflow-57065527
UPDATE the author requested a demo using a variable
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
injectjs() {
let name = 'Abraham';
setTimeout(() => {});
return `document.getElementById('inject').innerHTML = '<h1>The name is <b>${name}</b></h1>'`;
}
render() {
return (
<View style={{ flex: 1 }}>
<WebView
ref={(r) => (this.webref = r)}
injectedJavaScript={this.injectjs()}
source={require('./demo.html')}
/>
</View>
);
}
}
demo.html
<html>
<head>
<title>Ejemplo de inyeccion desde React Native</title>
<style>
body {
background-color: aquamarine;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" />
<div id="inject">
</body>
</html>
Result
Upvotes: 3