Browse Source

add baseUrl prop

iou90 5 years ago
parent
commit
d172f58637

+ 3
- 3
autoHeightWebView/common.js View File

82
   return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
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
   const script = getScript(props, getBaseScript, getIframeBaseScript);
87
   const script = getScript(props, getBaseScript, getIframeBaseScript);
88
   let state = {};
88
   let state = {};
89
   if (source.html) {
89
   if (source.html) {
137
   return {
137
   return {
138
     height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
138
     height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
139
     width: enableAnimation ? widthValue : width
139
     width: enableAnimation ? widthValue : width
140
-  }
140
+  };
141
 }
141
 }

+ 8
- 10
autoHeightWebView/index.android.js View File

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

+ 5
- 2
autoHeightWebView/index.ios.js View File

43
     onLoadStart: PropTypes.func,
43
     onLoadStart: PropTypes.func,
44
     onLoadEnd: PropTypes.func,
44
     onLoadEnd: PropTypes.func,
45
     onShouldStartLoadWithRequest: PropTypes.func,
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
     files: PropTypes.arrayOf(
49
     files: PropTypes.arrayOf(
48
       PropTypes.shape({
50
       PropTypes.shape({
49
         href: PropTypes.string,
51
         href: PropTypes.string,
54
   };
56
   };
55
 
57
 
56
   static defaultProps = {
58
   static defaultProps = {
59
+    baseUrl: 'web/',
57
     scalesPageToFit: false,
60
     scalesPageToFit: false,
58
     enableAnimation: true,
61
     enableAnimation: true,
59
     animationDuration: 255,
62
     animationDuration: 255,
147
       style,
150
       style,
148
       scrollEnabled
151
       scrollEnabled
149
     } = this.props;
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
     return (
154
     return (
152
       <Animated.View
155
       <Animated.View
153
         style={[
156
         style={[

+ 9
- 6
demo/App.js View File

2
 
2
 
3
 import React, { Component } from 'react';
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
 import AutoHeightWebView from 'react-native-autoheight-webview';
7
 import AutoHeightWebView from 'react-native-autoheight-webview';
8
 
8
 
99
           height: {heightSize.height}, width: {heightSize.width}
99
           height: {heightSize.height}, width: {heightSize.width}
100
         </Text>
100
         </Text>
101
         <AutoHeightWebView
101
         <AutoHeightWebView
102
+          baseUrl={Platform.OS === 'Android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
102
           style={{
103
           style={{
103
             marginTop: 15
104
             marginTop: 15
104
           }}
105
           }}
105
           enableBaseUrl
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
           customStyle={widthStyle}
114
           customStyle={widthStyle}
112
           onError={() => console.log('width on error')}
115
           onError={() => console.log('width on error')}
113
           onLoad={() => console.log('width on load')}
116
           onLoad={() => console.log('width on load')}

+ 3
- 0
demo/android/app/src/main/assets/webAssets/demo.css View File

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

+ 12
- 0
demo/ios/demo.xcodeproj/project.pbxproj View File

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

+ 3
- 0
demo/ios/webAssets/demo.css View File

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

+ 1
- 1
package-lock.json View File

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