react-native-webview.git

Alerts.tsx 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import React, {Component} from 'react';
  2. import {Text, View} from 'react-native';
  3. import WebView from 'react-native-webview';
  4. const HTML = `
  5. <!DOCTYPE html>\n
  6. <html>
  7. <head>
  8. <title>Alerts</title>
  9. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  10. <meta name="viewport" content="width=320, user-scalable=no">
  11. <style type="text/css">
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. font: 62.5% arial, sans-serif;
  16. background: #ccc;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <button onclick="showAlert()">Show alert</button>
  22. <button onclick="showConfirm()">Show confirm</button>
  23. <button onclick="showPrompt()">Show prompt</button>
  24. <p id="demo"></p>
  25. <script>
  26. function showAlert() {
  27. alert("Hello! I am an alert box!");
  28. document.getElementById("demo").innerHTML = "Alert dismissed!";
  29. }
  30. function showConfirm() {
  31. var response;
  32. if (confirm("Press a button!")) {
  33. response = "You pressed OK on confirm!";
  34. } else {
  35. response = "You pressed Cancel on confirm!";
  36. }
  37. document.getElementById("demo").innerHTML = response;
  38. }
  39. function showPrompt() {
  40. var message;
  41. const name = prompt("Please enter your name", "Name");
  42. if (name !== null) {
  43. message = "Hello " + name;
  44. } else {
  45. message = "You pressed Cancel on prompt!";
  46. }
  47. document.getElementById("demo").innerHTML = message;
  48. }
  49. </script>
  50. </body>
  51. </html>
  52. `;
  53. type Props = {};
  54. type State = {};
  55. export default class Alerts extends Component<Props, State> {
  56. state = {};
  57. render() {
  58. return (
  59. <View style={{ height: 120 }}>
  60. <WebView
  61. source={{html: HTML}}
  62. automaticallyAdjustContentInsets={false}
  63. />
  64. </View>
  65. );
  66. }
  67. }