How to close Webview when tapping a button inside Webview?
import React from 'react';
import { WebView } from 'react-native-webview';
const Form: React.FC = () => {
const [isClose, setIsClose] = React.useState(false);
const html = `
<html>
<head></head>
<body>
<script>
function closeWebview() {
window.ReactNativeWebView.postMessage("CLOSE")
}
</script>
<button onclick="closeWebview()">Close</button>
</body>
</html>
`;
const onMessage = (event) => {
if (event.nativeEvent.data === 'CLOSE') {
setIsClose(true);
}
};
if (isClose) {
return null;
}
return <WebView source={{ html }} onMessage={onMessage} />;
};
export default Form;
How to pass data from React Native to webview
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const html = `
<html>
<head></head>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{ html }}
onMessage={event => {
alert(event.nativeEvent.data);
}}
/>
</View>
);
}
}
Issues
How to fix Android crash when use Webview inside a Scrollview?
react-native-screens/issues/214
<WebView
style={{ opacity: 0.99}}
androidHardwareAccelerationDisabled
...
>
How to render HTML&css without using heavy react-native-webview?
Find a way to communicate between React Native code and web code running in the Webview
injectedJavaScript
- Inject JavaScript code to be executed within the context of the WebView
- This only run once the WebView is loaded so unless you want to reload your web content each time you want to pass something into the WebView this is not the way to go
- In iOS you can get the returned value from the injected JavaScript (as long as it’s a string), but in Android, well… you get nothing
injectJavaScript
- Inject JavaScript code that is executed immediately on the WebView, with no return value
- This API is perfect for setting globals and dispatching events on the window
onMessage/postMessage
- This is probably the only API that gives a real two way bridge for communication
- postMessage does in its implementation something similar to injectJavaScript, only with the extra boilerplate code of firing a message event in the WebView
- Sending messages between React Native and the WebView is a matter of calling postMessage and implementing onMessage on the receiving side to get the message:
[js]
console.log(event.nativeEvent.data)}
/>
[/js]
Leave a Reply