npm
/
react-native-webview
Suivre 11
Favoriser 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 141 Wiki Activité
Parcourir la source

Updated tests

Tom Underhill il y a 4 ans
Parent
a1da2c9271
révision
57d9c5c2b2
4 fichiers modifiés avec 217 ajouts et 30 suppressions
Vue séparée Afficher les stats Diff
  1. 36
    13
      example/App.js
  2. 82
    0
      example/examples/Alerts.js
  3. 21
    17
      example/examples/Background.js
  4. 78
    0
      example/examples/Scrolling.js

+ 36
- 13
example/App.js Voir le fichier 

@@ -19,15 +19,33 @@ import {
19 19 
   Button,
20 20 
 } from 'react-native';
21 21
22 
-import InlineWebView from './examples/InlineWebView';
22 
+import Alerts from './examples/Alerts';
23 
+import Scrolling from './examples/Scrolling';
24 
+import Background from './examples/Background';
23 25
24 26 
 const TESTS = {
25 
-  InlineWebView: {
26 
-    title: 'Inline HTML WebView',
27 
-    testId: 'inline-webview',
28 
-    description: 'Inline HTML WebView',
27 
+  Alerts: {
28 
+    title: 'Alerts',
29 
+    testId: 'alerts',
30 
+    description: 'Alerts tests',
29 31 
     render() {
30 
-      return <InlineWebView />;
32 
+      return <Alerts />;
33 
+    },
34 
+  },
35 
+  Scrolling: {
36 
+    title: 'Scrolling',
37 
+    testId: 'scrolling',
38 
+    description: 'Scrolling event test',
39 
+    render() {
40 
+      return <Scrolling />;
41 
+    },
42 
+  },
43 
+  Background: {
44 
+    title: 'Background',
45 
+    testId: 'background',
46 
+    description: 'Background color test',
47 
+    render() {
48 
+      return <Background />;
31 49 
     },
32 50 
   },
33 51 
 };
 
@@ -38,7 +56,7 @@ type State = {restarting: boolean, currentTest: Object};
38 56 
 export default class App extends Component<Props, State> {
39 57 
   state = {
40 58 
     restarting: false,
41 
-    currentTest: TESTS.InlineWebView,
59 
+    currentTest: TESTS.Alerts,
42 60 
   };
43 61
44 62 
   _simulateRestart = () => {
 
@@ -69,14 +87,19 @@ export default class App extends Component<Props, State> {
69 87
70 88 
         <View style={styles.testPickerContainer}>
71 89 
           <Button
72 
-            testID="testType_getSetClear"
73 
-            title="Get/Set/Clear"
74 
-            onPress={() => this._changeTest('GetSetClear')}
90 
+            testID="testType_alerts"
91 
+            title="Alerts"
92 
+            onPress={() => this._changeTest('Alerts')}
93 
+          />
94 
+          <Button
95 
+            testID="testType_scrolling"
96 
+            title="Scrolling"
97 
+            onPress={() => this._changeTest('Scrolling')}
75 98 
           />
76 99 
           <Button
77 
-            testID="testType_mergeItem"
78 
-            title="Merge Item"
79 
-            onPress={() => this._changeTest('MergeItem')}
100 
+            testID="testType_background"
101 
+            title="Background"
102 
+            onPress={() => this._changeTest('Background')}
80 103 
           />
81 104 
         </View>
82 105

+ 82
- 0
example/examples/Alerts.js Voir le fichier 

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

example/examples/InlineWebView.js → example/examples/Background.js Voir le fichier 

@@ -17,7 +17,7 @@ const HTML = `
17 17 
 <!DOCTYPE html>\n
18 18 
 <html>
19 19 
   <head>
20 
-    <title>Hello Static World</title>
20 
+    <title>Hello World</title>
21 21 
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
22 22 
     <meta name="viewport" content="width=320, user-scalable=no">
23 23 
     <style type="text/css">
 
@@ -25,35 +25,39 @@ const HTML = `
25 25 
         margin: 0;
26 26 
         padding: 0;
27 27 
         font: 62.5% arial, sans-serif;
28 
-        background: #ccc;
29 
-      }
30 
-      h1 {
31 
-        padding: 45px;
32 
-        margin: 0;
33 
-        text-align: center;
34 
-        color: #33f;
28 
+        background: transparent;
35 29 
       }
36 30 
     </style>
37 31 
   </head>
38 32 
   <body>
39 
-    <h1>Hello Static World</h1>
33 
+    <p>HTML content in transparent body.</p>
40 34 
   </body>
41 35 
 </html>
42 36 
 `;
43 37
44 38 
 type Props = {};
45 
-type State = {};
39 
+type State = {
40 
+  backgroundColor: string,
41 
+};
46 42
47 
-export default class InlineWebView extends Component<Props, State> {
48 
-  state = {};
43 
+export default class Background extends Component<Props, State> {
44 
+  state = {
45 
+    backgroundColor: '#FF00FF00'
46 
+  };
49 47
50 48 
   render() {
51 49 
     return (
52 
-      <View style={{ height: 120 }}>
53 
-        <WebView
54 
-          source={{html: HTML}}
55 
-          automaticallyAdjustContentInsets={false}
56 
-        />
50 
+      <View>
51 
+        <View style={{backgroundColor:'red'}}>
52 
+          <View style={{ height: 120 }}>
53 
+            <WebView
54 
+              source={{html: HTML}}
55 
+              automaticallyAdjustContentInsets={false}
56 
+              style={{backgroundColor:'#00000000'}}
57 
+            />
58 
+          </View>
59 
+        </View>
60 
+        <Text>WebView is transparent contained in a View with a red backgroundColor</Text>
57 61 
       </View>
58 62 
     );
59 63 
   }

+ 78
- 0
example/examples/Scrolling.js Voir le fichier 

@@ -0,0 +1,78 @@
1 
+/**
2 
+ * Copyright (c) Facebook, Inc. and its affiliates.
3 
+ *
4 
+ * This source code is licensed under the MIT license found in the
5 
+ * LICENSE file in the root directory of this source tree.
6 
+ *
7 
+ * @format
8 
+ * @flow
9 
+ */
10 
+
11 
+import React, {Component} from 'react';
12 
+import {Button, Text, View} from 'react-native';
13 
+
14 
+import WebView from 'react-native-webview';
15 
+
16 
+const HTML = `
17 
+<!DOCTYPE html>\n
18 
+<html>
19 
+  <head>
20 
+    <title>Hello World</title>
21 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
22 
+    <meta name="viewport" content="width=320, user-scalable=no">
23 
+    <style type="text/css">
24 
+      body {
25 
+        margin: 0;
26 
+        padding: 0;
27 
+        font: 62.5% arial, sans-serif;
28 
+        background: #ccc;
29 
+      }
30 
+    </style>
31 
+  </head>
32 
+  <body>
33 
+    <p>Lorem ipsum dolor sit amet, virtute utroque voluptaria et duo, probo aeque partiendo pri at. Mea ut stet aliquip deterruisset. Inani erroribus principes ei mel, no dicit recteque delicatissimi usu. Ne has dolore nominavi, feugait hendrerit interesset vis ea, amet regione ne pri. Te cum amet etiam.</p>
34 
+    <p>Ut adipiscing neglegentur mediocritatem sea, suas abhorreant ius cu, ne nostrud feugiat per. Nam paulo facete iudicabit an, an brute mundi suavitate has, ex utamur numquam duo. Sea platonem argumentum instructior in, quo no prima inani perfecto. Ex illum postea copiosae has, ei mea sonet ocurreret.</p>
35 
+    <p>Has convenire erroribus cu, quo homero facilisis inciderint ea. Vix choro gloriatur definitionem an, te exerci debitis voluptaria pri, mea admodum antiopam neglegentur te. His ea iisque splendide, nam id malorum pertinacia. Iusto tempor in eos, vis debet erant an. An nostrum rationibus sit, et sed dicta delenit suscipiantur. Est dolore vituperatoribus in, ubique explicari est cu. Legere tractatos ut usu, probo atqui vituperata in usu, mazim nemore praesent pro no.</p>
36 
+    <p>Ei pri facilisi accusamus. Ut partem quaestio sit, an usu audiam quaerendum, ei qui hinc soleat. Fabulas phaedrum erroribus ut est. Intellegebat delicatissimi vis cu. His ea vidit libris facilis. Usu ne scripta legimus intellegam. Hendrerit urbanitas accommodare mei in.</p>
37 
+    <p>Brute appetere efficiendi has ne. Ei ornatus labores vis. Vel harum fierent no, ad erat partiendo vis, harum democritum duo at. Has no labitur vulputate. Has cu autem aperiam hendrerit, sed eu justo verear menandri.</p>
38 
+  </body>
39 
+</html>
40 
+`;
41 
+
42 
+type Props = {};
43 
+type State = {
44 
+  scrollEnabled: boolean,
45 
+  lastScrollEvent: string
46 
+};
47 
+
48 
+export default class Scrolling extends Component<Props, State> {
49 
+  state = {
50 
+    scrollEnabled: true,
51 
+    lastScrollEvent: ''
52 
+  };
53 
+
54 
+  render() {
55 
+    return (
56 
+      <View>
57 
+        <View style={{ height: 120 }}>
58 
+          <WebView
59 
+            source={{html: HTML}}
60 
+            automaticallyAdjustContentInsets={false}
61 
+            onScroll={this._onScroll}
62 
+            scrollEnabled={this.state.scrollEnabled}
63 
+          />
64 
+        </View>
65 
+        <Button
66 
+          title={this.state.scrollEnabled ? 'Scroll enabled' : 'Scroll disabled'}
67 
+          onPress={() => this.setState({scrollEnabled: !this.state.scrollEnabled})}
68 
+        />
69 
+        <Text>Last scroll event:</Text>
70 
+        <Text>{this.state.lastScrollEvent}</Text>
71 
+      </View>
72 
+    );
73 
+  }
74 
+
75 
+  _onScroll = event => {
76 
+    this.setState({lastScrollEvent: JSON.stringify(event.nativeEvent)});
77 
+  }
78 
+}