12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- import React, {Component} from 'react';
- import {Text, View} from 'react-native';
-
- import WebView from 'react-native-webview';
-
- const HTML = `
- <!DOCTYPE html>\n
- <html>
- <head>
- <title>Alerts</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=320, user-scalable=no">
- <style type="text/css">
- body {
- margin: 0;
- padding: 0;
- font: 62.5% arial, sans-serif;
- background: #ccc;
- }
- </style>
- </head>
- <body>
- <button onclick="showAlert()">Show alert</button>
- <button onclick="showConfirm()">Show confirm</button>
- <button onclick="showPrompt()">Show prompt</button>
- <p id="demo"></p>
- <script>
- function showAlert() {
- alert("Hello! I am an alert box!");
- document.getElementById("demo").innerHTML = "Alert dismissed!";
- }
- function showConfirm() {
- var response;
- if (confirm("Press a button!")) {
- response = "You pressed OK on confirm!";
- } else {
- response = "You pressed Cancel on confirm!";
- }
- document.getElementById("demo").innerHTML = response;
- }
- function showPrompt() {
- var message;
- const name = prompt("Please enter your name", "Name");
- if (name !== null) {
- message = "Hello " + name;
- } else {
- message = "You pressed Cancel on prompt!";
- }
- document.getElementById("demo").innerHTML = message;
- }
- </script>
- </body>
- </html>
- `;
-
- type Props = {};
- type State = {};
-
- export default class Alerts extends Component<Props, State> {
- state = {};
-
- render() {
- return (
- <View style={{ height: 120 }}>
- <WebView
- source={{html: HTML}}
- automaticallyAdjustContentInsets={false}
- />
- </View>
- );
- }
- }
|