yyppaag
/
react-native-webview
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 180 Wiki Activity
Explorar el Código

Messaging test added into example app

Tero Paananen hace 4 años
padre
acac5fd504
commit
d29e285284
Se han modificado 2 ficheros con 84 adiciones y 12 borrados
Dividir vista Mostrar estadísticas de diff
  1. 30
    12
      example/App.tsx
  2. 54
    0
      example/examples/Messaging.tsx

+ 30
- 12
example/App.tsx Ver fichero 

@@ -17,8 +17,17 @@ import Downloads from './examples/Downloads';
17 17 
 import Uploads from './examples/Uploads';
18 18 
 import Injection from './examples/Injection';
19 19 
 import LocalPageLoad from './examples/LocalPageLoad';
20 
+import Messaging from './examples/Messaging';
20 21
21 22 
 const TESTS = {
23 
+  Messaging: {
24 
+    title: 'Messaging',
25 
+    testId: 'messaging',
26 
+    description: 'js-webview postMessage messaging test',
27 
+    render() {
28 
+      return <Messaging />;
29 
+    },
30 
+  },
22 31 
   Alerts: {
23 32 
     title: 'Alerts',
24 33 
     testId: 'alerts',
 
@@ -78,7 +87,7 @@ const TESTS = {
78 87 
 };
79 88
80 89 
 type Props = {};
81 
-type State = {restarting: boolean, currentTest: Object};
90 
+type State = {restarting: boolean; currentTest: Object};
82 91
83 92 
 export default class App extends Component<Props, State> {
84 93 
   state = {
 
@@ -90,7 +99,7 @@ export default class App extends Component<Props, State> {
90 99 
     this.setState({restarting: true}, () => this.setState({restarting: false}));
91 100 
   };
92 101
93 
-  _changeTest = testName => {
102 
+  _changeTest = (testName) => {
94 103 
     this.setState({currentTest: TESTS[testName]});
95 104 
   };
96 105 
 
@@ -138,16 +147,25 @@ export default class App extends Component<Props, State> {
138 147 
             title="LocalPageLoad"
139 148 
             onPress={() => this._changeTest('PageLoad')}
140 149 
           />
141 
-          {Platform.OS == "ios" && <Button
142 
-            testID="testType_downloads"
143 
-            title="Downloads"
144 
-            onPress={() => this._changeTest('Downloads')}
145 
-          />}
146 
-          {Platform.OS === 'android' && <Button
147 
-            testID="testType_uploads"
148 
-            title="Uploads"
149 
-            onPress={() => this._changeTest('Uploads')}
150 
-          />}
150 
+          {Platform.OS == 'ios' && (
151 
+            <Button
152 
+              testID="testType_downloads"
153 
+              title="Downloads"
154 
+              onPress={() => this._changeTest('Downloads')}
155 
+            />
156 
+          )}
157 
+          {Platform.OS === 'android' && (
158 
+            <Button
159 
+              testID="testType_uploads"
160 
+              title="Uploads"
161 
+              onPress={() => this._changeTest('Uploads')}
162 
+            />
163 
+          )}
164 
+          <Button
165 
+            testID="testType_messaging"
166 
+            title="Messaging"
167 
+            onPress={() => this._changeTest('Messaging')}
168 
+          />
151 169 
         </View>
152 170
153 171 
         {restarting ? null : (

+ 54
- 0
example/examples/Messaging.tsx Ver fichero 

@@ -0,0 +1,54 @@
1 
+import React, {Component} from 'react';
2 
+import {Text, View, Alert} from 'react-native';
3 
+
4 
+import WebView from 'react-native-webview';
5 
+
6 
+const HTML = `
7 
+<!DOCTYPE html>\n
8 
+<html>
9 
+  <head>
10 
+    <title>Messaging</title>
11 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
12 
+    <meta name="viewport" content="width=320, user-scalable=no">
13 
+    <style type="text/css">
14 
+      body {
15 
+        margin: 0;
16 
+        padding: 0;
17 
+        font: 62.5% arial, sans-serif;
18 
+        background: #ccc;
19 
+      }
20 
+    </style>
21 
+  </head>
22 
+  <body>
23 
+    <button onclick="sendPostMessage()">Send post message from JS to WebView</button>
24 
+    <p id="demo"></p>
25 
+    <script>
26 
+      function sendPostMessage() {
27 
+        window.ReactNativeWebView.postMessage('Message from javascript');
28 
+      }
29 
+    </script>
30 
+  </body>
31 
+</html>
32 
+`;
33 
+
34 
+type Props = {};
35 
+type State = {};
36 
+
37 
+export default class Alerts extends Component<Props, State> {
38 
+  state = {};
39 
+
40 
+  render() {
41 
+    return (
42 
+      <View style={{height: 120}}>
43 
+        <WebView
44 
+          source={{html: HTML}}
45 
+          automaticallyAdjustContentInsets={false}
46 
+          onMessage={(e: {nativeEvent: {data?: string}}) => {
47 
+            console.log('onMessage', e.nativeEvent.data);
48 
+            Alert.alert('Message received', e.nativeEvent.data);
49 
+          }}
50 
+        />
51 
+      </View>
52 
+    );
53 
+  }
54 
+}