npm
/
react-native-webview
Следить 11
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 141 Вики Активность
Просмотр исходного кода

Add scroll test

Tom Underhill 5 лет назад
Родитель
369b9a74ed
Сommit
09d05e6fa6
4 измененных файлов: 84 добавлений и 81 удалений
Разделённый вид Показать статистику Diff
  1. 15
    15
      example/App.js
  2. 0
    6
      example/examples/Alerts.js
  3. 0
    60
      example/examples/InlineWebView.js
  4. 69
    0
      example/examples/Scrolling.js

+ 15
- 15
example/App.js Просмотреть файл 

@@ -19,18 +19,10 @@ import {
19 19 
   Button,
20 20 
 } from 'react-native';
21 21
22 
-import InlineWebView from './examples/InlineWebView';
23 22 
 import Alerts from './examples/Alerts';
23 
+import Scrolling from './examples/Scrolling';
24 24
25 25 
 const TESTS = {
26 
-  InlineWebView: {
27 
-    title: 'Inline HTML WebView',
28 
-    testId: 'inline-webview',
29 
-    description: 'Inline HTML WebView',
30 
-    render() {
31 
-      return <InlineWebView />;
32 
-    },
33 
-  },
34 26 
   Alerts: {
35 27 
     title: 'Alerts',
36 28 
     testId: 'alerts',
 
@@ -39,6 +31,14 @@ const TESTS = {
39 31 
       return <Alerts />;
40 32 
     },
41 33 
   },
34 
+  Scrolling: {
35 
+    title: 'Scrolling',
36 
+    testId: 'scrolling',
37 
+    description: 'Scrolling event test',
38 
+    render() {
39 
+      return <Scrolling />;
40 
+    },
41 
+  },
42 42 
 };
43 43
44 44 
 type Props = {};
 
@@ -47,7 +47,7 @@ type State = {restarting: boolean, currentTest: Object};
47 47 
 export default class App extends Component<Props, State> {
48 48 
   state = {
49 49 
     restarting: false,
50 
-    currentTest: TESTS.InlineWebView,
50 
+    currentTest: TESTS.Alerts,
51 51 
   };
52 52
53 53 
   _simulateRestart = () => {
 
@@ -77,16 +77,16 @@ export default class App extends Component<Props, State> {
77 77 
         </TouchableOpacity>
78 78
79 79 
         <View style={styles.testPickerContainer}>
80 
-          <Button
81 
-            testID="testType_inlineWebView"
82 
-            title="InlineWebView"
83 
-            onPress={() => this._changeTest('InlineWebView')}
84 
-          />
85 80 
           <Button
86 81 
             testID="testType_alerts"
87 82 
             title="Alerts"
88 83 
             onPress={() => this._changeTest('Alerts')}
89 84 
           />
85 
+          <Button
86 
+            testID="testType_scrolling"
87 
+            title="Scrolling"
88 
+            onPress={() => this._changeTest('Scrolling')}
89 
+          />
90 90 
         </View>
91 91
92 92 
         {restarting ? null : (

+ 0
- 6
example/examples/Alerts.js Просмотреть файл 

@@ -27,12 +27,6 @@ const HTML = `
27 27 
         font: 62.5% arial, sans-serif;
28 28 
         background: #ccc;
29 29 
       }
30 
-      h1 {
31 
-        padding: 45px;
32 
-        margin: 0;
33 
-        text-align: center;
34 
-        color: #33f;
35 
-      }
36 30 
     </style>
37 31 
   </head>
38 32 
   <body>

+ 0
- 60
example/examples/InlineWebView.js Просмотреть файл 

@@ -1,60 +0,0 @@
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>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 
-      h1 {
31 
-        padding: 45px;
32 
-        margin: 0;
33 
-        text-align: center;
34 
-        color: #33f;
35 
-      }
36 
-    </style>
37 
-  </head>
38 
-  <body>
39 
-    <h1>Hello World</h1>
40 
-  </body>
41 
-</html>
42 
-`;
43 
-
44 
-type Props = {};
45 
-type State = {};
46 
-
47 
-export default class InlineWebView extends Component<Props, State> {
48 
-  state = {};
49 
-
50 
-  render() {
51 
-    return (
52 
-      <View style={{ height: 120 }}>
53 
-        <WebView
54 
-          source={{html: HTML}}
55 
-          automaticallyAdjustContentInsets={false}
56 
-        />
57 
-      </View>
58 
-    );
59 
-  }
60 
-}

+ 69
- 0
example/examples/Scrolling.js Просмотреть файл 

@@ -0,0 +1,69 @@
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>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 = { lastScrollEvent: string };
44 
+
45 
+export default class Scrolling extends Component<Props, State> {
46 
+  state = {
47 
+    lastScrollEvent: ''
48 
+  };
49 
+
50 
+  render() {
51 
+    return (
52 
+      <View>
53 
+      <View style={{ height: 120 }}>
54 
+        <WebView
55 
+          source={{html: HTML}}
56 
+          automaticallyAdjustContentInsets={false}
57 
+          onScroll={this._onScroll}
58 
+        />
59 
+      </View>
60 
+      <Text>Last scroll event:</Text>
61 
+      <Text>{this.state.lastScrollEvent}</Text>
62 
+      </View>
63 
+    );
64 
+  }
65 
+
66 
+  _onScroll = info => {
67 
+    this.setState({ lastScrollEvent: JSON.stringify(info.nativeEvent) });
68 
+  }
69 
+}