yyppaag
/
react-native-autoheight-webview
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 30 Wiki Activiteit
Bladeren bron

add baseUrl prop

iou90 5 jaren geleden
bovenliggende
f5d60bfde7
commit
d172f58637
8 gewijzigde bestanden met toevoegingen van 44 en 22 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 3
    3
      autoHeightWebView/common.js
  2. 8
    10
      autoHeightWebView/index.android.js
  3. 5
    2
      autoHeightWebView/index.ios.js
  4. 9
    6
      demo/App.js
  5. 3
    0
      demo/android/app/src/main/assets/webAssets/demo.css
  6. 12
    0
      demo/ios/demo.xcodeproj/project.pbxproj
  7. 3
    0
      demo/ios/webAssets/demo.css
  8. 1
    1
      package-lock.json

+ 3
- 3
autoHeightWebView/common.js Bestand weergeven 

@@ -82,8 +82,8 @@ export function isEqual(newProps, oldProps) {
82 82 
   return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
83 83 
 }
84 84
85 
-export function setState(props, baseUrl, getBaseScript, getIframeBaseScript) {
86 
-  const { source } = props;
85 
+export function setState(props, getBaseScript, getIframeBaseScript) {
86 
+  const { source, baseUrl } = props;
87 87 
   const script = getScript(props, getBaseScript, getIframeBaseScript);
88 88 
   let state = {};
89 89 
   if (source.html) {
 
@@ -137,5 +137,5 @@ export function getRenderSize(enableAnimation, height, width, heightOffset, heig
137 137 
   return {
138 138 
     height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
139 139 
     width: enableAnimation ? widthValue : width
140 
-  }
140 
+  };
141 141 
 }

+ 8
- 10
autoHeightWebView/index.android.js Bestand weergeven 

@@ -42,8 +42,6 @@ const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', Auto
42 42
43 43 
 import momoize from './momoize';
44 44
45 
-const baseUrl = 'file:///android_asset/web/';
46 
-
47 45 
 const getUpdatedState = momoize(setState, isEqual);
48 46
49 47 
 export default class AutoHeightWebView extends PureComponent {
 
@@ -65,15 +63,15 @@ export default class AutoHeightWebView extends PureComponent {
65 63 
     animationEasing: PropTypes.func,
66 64 
     // offset of rn webView margin
67 65 
     heightOffset: PropTypes.number,
68 
-    // baseUrl not work in android 4.3 or below version
69 
-    enableBaseUrl: PropTypes.bool,
70 66 
     style: ViewPropTypes.style,
71 67 
     //  rn WebView callback
72 68 
     onError: PropTypes.func,
73 69 
     onLoad: PropTypes.func,
74 70 
     onLoadStart: PropTypes.func,
75 71 
     onLoadEnd: PropTypes.func,
76 
-    // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
72 
+    // 'file:///android_asset/web/' by default, and baseUrl not work in android 4.3 or below version
73 
+    baseUrl: PropTypes.string,
74 
+    // add baseUrl/files... to android/app/src/assets/
77 75 
     files: PropTypes.arrayOf(
78 76 
       PropTypes.shape({
79 77 
         href: PropTypes.string,
 
@@ -84,8 +82,8 @@ export default class AutoHeightWebView extends PureComponent {
84 82 
   };
85 83
86 84 
   static defaultProps = {
85 
+    baseUrl: 'file:///android_asset/web/',
87 86 
     scalesPageToFit: true,
88 
-    enableBaseUrl: false,
89 87 
     enableAnimation: true,
90 88 
     animationDuration: 255,
91 89 
     heightOffset: 20,
 
@@ -94,7 +92,7 @@ export default class AutoHeightWebView extends PureComponent {
94 92
95 93 
   constructor(props) {
96 94 
     super(props);
97 
-    const { enableAnimation, style, source, enableBaseUrl, heightOffset } = props;
95 
+    const { baseUrl, enableAnimation, style, source, heightOffset } = props;
98 96 
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
99 97 
     this.finishInterval = true;
100 98 
     const initWidth = getWidth(style);
 
@@ -105,7 +103,7 @@ export default class AutoHeightWebView extends PureComponent {
105 103 
       height: initHeight,
106 104 
       width: initWidth,
107 105 
       script: getScript(props, getBaseScript),
108 
-      source: enableBaseUrl ? Object.assign({}, source, { baseUrl }) : source
106 
+      source: Object.assign({}, source, { baseUrl })
109 107 
     };
110 108 
     if (enableAnimation) {
111 109 
       Object.assign(state, {
 
@@ -122,8 +120,8 @@ export default class AutoHeightWebView extends PureComponent {
122 120
123 121 
   static getDerivedStateFromProps(props, state) {
124 122 
     const { height: oldHeight, width: oldWidth, source: prevSource, script: prevScript } = state;
125 
-    const { style, enableBaseUrl } = props;
126 
-    const { source, script } = getUpdatedState(props, enableBaseUrl ? baseUrl : null, getBaseScript);
123 
+    const { style } = props;
124 
+    const { source, script } = getUpdatedState(props, getBaseScript);
127 125 
     const height = style ? style.height : null;
128 126 
     const width = style ? style.width : null;
129 127 
     if (source.html !== prevSource.html || source.uri !== prevSource.uri || script !== prevScript) {

+ 5
- 2
autoHeightWebView/index.ios.js Bestand weergeven 

@@ -43,7 +43,9 @@ export default class AutoHeightWebView extends PureComponent {
43 43 
     onLoadStart: PropTypes.func,
44 44 
     onLoadEnd: PropTypes.func,
45 45 
     onShouldStartLoadWithRequest: PropTypes.func,
46 
-    // add web/files... to project root
46 
+    // 'web/' by default
47 
+    baseUrl: PropTypes.string,
48 
+    // add baseUrl/files... to project root
47 49 
     files: PropTypes.arrayOf(
48 50 
       PropTypes.shape({
49 51 
         href: PropTypes.string,
 
@@ -54,6 +56,7 @@ export default class AutoHeightWebView extends PureComponent {
54 56 
   };
55 57
56 58 
   static defaultProps = {
59 
+    baseUrl: 'web/',
57 60 
     scalesPageToFit: false,
58 61 
     enableAnimation: true,
59 62 
     animationDuration: 255,
 
@@ -147,7 +150,7 @@ export default class AutoHeightWebView extends PureComponent {
147 150 
       style,
148 151 
       scrollEnabled
149 152 
     } = this.props;
150 
-    const { source, script } = this.getUpdatedState(this.props, 'web/', getBaseScript, getIframeBaseScript);
153 
+    const { source, script } = this.getUpdatedState(this.props, getBaseScript, getIframeBaseScript);
151 154 
     return (
152 155 
       <Animated.View
153 156 
         style={[

+ 9
- 6
demo/App.js Bestand weergeven 

@@ -2,7 +2,7 @@
2 2
3 3 
 import React, { Component } from 'react';
4 4
5 
-import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
5 
+import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform } from 'react-native';
6 6
7 7 
 import AutoHeightWebView from 'react-native-autoheight-webview';
8 8 
 
@@ -99,15 +99,18 @@ export default class Explorer extends Component {
99 99 
           height: {heightSize.height}, width: {heightSize.width}
100 100 
         </Text>
101 101 
         <AutoHeightWebView
102 
+          baseUrl={Platform.OS === 'Android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
102 103 
           style={{
103 104 
             marginTop: 15
104 105 
           }}
105 106 
           enableBaseUrl
106 
-          files={[{
107 
-            href: 'demo.css',
108 
-            type: 'text/css',
109 
-            rel: 'stylesheet'
110 
-          }]}
107 
+          files={[
108 
+            {
109 
+              href: 'demo.css',
110 
+              type: 'text/css',
111 
+              rel: 'stylesheet'
112 
+            }
113 
+          ]}
111 114 
           customStyle={widthStyle}
112 115 
           onError={() => console.log('width on error')}
113 116 
           onLoad={() => console.log('width on load')}

+ 3
- 0
demo/android/app/src/main/assets/webAssets/demo.css Bestand weergeven 

@@ -0,0 +1,3 @@
1 
+.localStyle {
2 
+    font-weight: bold;
3 
+}

+ 12
- 0
demo/ios/demo.xcodeproj/project.pbxproj Bestand weergeven 

@@ -35,6 +35,7 @@
35 35 
 		2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2D16E6891FA4F8E400B85C8A /* libReact.a */; };
36 36 
 		2DCD954D1E0B4F2C00145EB5 /* demoTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* demoTests.m */; };
37 37 
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
38 
+		37C4D8D1212434D7009B8FF3 /* demo.css in Resources */ = {isa = PBXBuildFile; fileRef = 37C4D8D0212434D7009B8FF3 /* demo.css */; };
38 39 
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
39 40 
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
40 41 
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
 
@@ -340,6 +341,7 @@
340 341 
 		2D02E47B1E0B4A5D006451C7 /* demo-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "demo-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
341 342 
 		2D02E4901E0B4A5D006451C7 /* demo-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "demo-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
342 343 
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
344 
+		37C4D8D0212434D7009B8FF3 /* demo.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = demo.css; sourceTree = "<group>"; };
343 345 
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
344 346 
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
345 347 
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 
@@ -484,6 +486,7 @@
484 486 
 		13B07FAE1A68108700A75B9A /* demo */ = {
485 487 
 			isa = PBXGroup;
486 488 
 			children = (
489 
+				37C4D8CF2124349B009B8FF3 /* webAssets */,
487 490 
 				B7420B5E210E3082007509B0 /* web */,
488 491 
 				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
489 492 
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 
@@ -527,6 +530,14 @@
527 530 
 			name = Frameworks;
528 531 
 			sourceTree = "<group>";
529 532 
 		};
533 
+		37C4D8CF2124349B009B8FF3 /* webAssets */ = {
534 
+			isa = PBXGroup;
535 
+			children = (
536 
+				37C4D8D0212434D7009B8FF3 /* demo.css */,
537 
+			);
538 
+			path = webAssets;
539 
+			sourceTree = "<group>";
540 
+		};
530 541 
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
531 542 
 			isa = PBXGroup;
532 543 
 			children = (
 
@@ -1059,6 +1070,7 @@
1059 1070 
 			isa = PBXResourcesBuildPhase;
1060 1071 
 			buildActionMask = 2147483647;
1061 1072 
 			files = (
1073 
+				37C4D8D1212434D7009B8FF3 /* demo.css in Resources */,
1062 1074 
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
1063 1075 
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
1064 1076 
 				B7420B85210E3185007509B0 /* demo.css in Resources */,

+ 3
- 0
demo/ios/webAssets/demo.css Bestand weergeven 

@@ -0,0 +1,3 @@
1 
+.localStyle {
2 
+    font-weight: bold;
3 
+}

+ 1
- 1
package-lock.json Bestand weergeven 

@@ -1,6 +1,6 @@
1 1 
 {
2 2 
   "name": "react-native-autoheight-webview",
3 
-  "version": "0.10.0",
3 
+  "version": "0.10.1",
4 4 
   "lockfileVersion": 1,
5 5 
   "requires": true,
6 6 
   "dependencies": {