npm
/
react-native-webview
關註 11
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 141 Wiki Activity
瀏覽代碼

Add scroll test

Tom Underhill 4 年之前
父節點
369b9a74ed
當前提交
09d05e6fa6
共有 4 個文件被更改，包括 84 次插入 和 81 次删除
分割檢視 顯示文件統計
  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 
+}