npm
/
react-native-webview
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 141 Wiki Activity
Browse Source

Implemented transparent backgroundColor

Tom Underhill 4 years ago
parent
ba1be12ea0
commit
fec04c8df2
4 changed files with 100 additions and 15 deletions
Split View Show Diff Stats
  1. 14
    0
      example/App.js
  2. 64
    0
      example/examples/Background.js
  3. 13
    13
      example/examples/Scrolling.js
  4. 9
    2
      ios/RNCWebView.m

+ 14
- 0
example/App.js View File 

@@ -21,6 +21,7 @@ import {
21 21
22 22 
 import Alerts from './examples/Alerts';
23 23 
 import Scrolling from './examples/Scrolling';
24 
+import Background from './examples/Background';
24 25
25 26 
 const TESTS = {
26 27 
   Alerts: {
 
@@ -39,6 +40,14 @@ const TESTS = {
39 40 
       return <Scrolling />;
40 41 
     },
41 42 
   },
43 
+  Background: {
44 
+    title: 'Background',
45 
+    testId: 'background',
46 
+    description: 'Background color test',
47 
+    render() {
48 
+      return <Background />;
49 
+    },
50 
+  },
42 51 
 };
43 52
44 53 
 type Props = {};
 
@@ -87,6 +96,11 @@ export default class App extends Component<Props, State> {
87 96 
             title="Scrolling"
88 97 
             onPress={() => this._changeTest('Scrolling')}
89 98 
           />
99 
+          <Button
100 
+            testID="testType_background"
101 
+            title="Background"
102 
+            onPress={() => this._changeTest('Background')}
103 
+          />
90 104 
         </View>
91 105
92 106 
         {restarting ? null : (

+ 64
- 0
example/examples/Background.js View File 

@@ -0,0 +1,64 @@
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: transparent;
29 
+      }
30 
+    </style>
31 
+  </head>
32 
+  <body>
33 
+    <p>HTML content in transparent body.</p>
34 
+  </body>
35 
+</html>
36 
+`;
37 
+
38 
+type Props = {};
39 
+type State = {
40 
+  backgroundColor: string,
41 
+};
42 
+
43 
+export default class Background extends Component<Props, State> {
44 
+  state = {
45 
+    backgroundColor: '#FF00FF00'
46 
+  };
47 
+
48 
+  render() {
49 
+    return (
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>
61 
+      </View>
62 
+    );
63 
+  }
64 
+}

+ 13
- 13
example/examples/Scrolling.js View File 

@@ -54,20 +54,20 @@ export default class Scrolling extends Component<Props, State> {
54 54 
   render() {
55 55 
     return (
56 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}
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})}
63 68 
         />
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>
69 
+        <Text>Last scroll event:</Text>
70 
+        <Text>{this.state.lastScrollEvent}</Text>
71 71 
       </View>
72 72 
     );
73 73 
   }

+ 9
- 2
ios/RNCWebView.m View File 

@@ -449,12 +449,19 @@ static NSDictionary* customCertificatesForHost;
449 449 
   }
450 450
451 451 
   CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
452 
+  BOOL opaque = (alpha == 1.0);
452 453 
 #if !TARGET_OS_OSX
453 
-  self.opaque = _webView.opaque = (alpha == 1.0);
454 
+  self.opaque = _webView.opaque = opaque;
454 455 
   _webView.scrollView.backgroundColor = backgroundColor;
455 456 
   _webView.backgroundColor = backgroundColor;
456 457 
 #else
457 
-  // TODO
458 
+  // https://stackoverflow.com/questions/40007753/macos-wkwebview-background-transparency
459 
+  NSOperatingSystemVersion version = { 10, 12, 0 };
460 
+  if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion:version]) {
461 
+    [_webView setValue:@(opaque) forKey: @"drawsBackground"];
462 
+  } else {
463 
+    [_webView setValue:@(!opaque) forKey: @"drawsTransparentBackground"];
464 
+  }
458 465 
 #endif // !TARGET_OS_OSX
459 466 
 }
460 467