Browse Source

fix index.android.js

iou90 7 years ago
parent
commit
5e367166e7
1 changed files with 34 additions and 9 deletions
  1. 34
    9
      autoHeightWebView/index.android.js

+ 34
- 9
autoHeightWebView/index.android.js View File

11
     WebView
11
     WebView
12
 } from 'react-native';
12
 } from 'react-native';
13
 
13
 
14
+const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView);
15
+
14
 export default class AutoHeightWebView extends Component {
16
 export default class AutoHeightWebView extends Component {
15
     constructor(props) {
17
     constructor(props) {
16
         super(props);
18
         super(props);
17
-        this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
19
+        this.onLoadingStart = this.onLoadingStart.bind(this);
20
+        this.onLoadingFinish = this.onLoadingStart.bind(this);
21
+        this.handleNavigationStateChanged = this.handleNavigationStateChanged.bind(this);
18
         const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
22
         const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
19
         this.state = {
23
         this.state = {
20
             height: 0,
24
             height: 0,
30
         this.setState({ script: currentScript });
34
         this.setState({ script: currentScript });
31
     }
35
     }
32
 
36
 
37
+    onLoadingStart(event) {
38
+        this.updateNavigationState(event);
39
+    }
40
+
41
+    onLoadingFinish(event) {
42
+        this.updateNavigationState(event);
43
+    }
44
+
45
+    updateNavigationState(event) {
46
+        this.handleNavigationStateChanged(event.nativeEvent);
47
+    }
48
+
33
     appendFilesToHead(files, script) {
49
     appendFilesToHead(files, script) {
34
         if (!files) {
50
         if (!files) {
35
             return script;
51
             return script;
47
         return script;
63
         return script;
48
     }
64
     }
49
 
65
 
50
-    handleNavigationStateChange(navState) {
66
+    handleNavigationStateChanged(navState) {
51
         const height = Number(navState.title);
67
         const height = Number(navState.title);
52
-        this.setState({ height });
53
-        if (this.props.onHeightUpdated) {
54
-            this.props.onHeightUpdated(height);
68
+        if (height) {
69
+            this.setState({ height });
70
+            if (this.props.onHeightUpdated) {
71
+                this.props.onHeightUpdated(height);
72
+            }
55
         }
73
         }
56
     }
74
     }
57
 
75
 
60
             html: this.props.html,
78
             html: this.props.html,
61
             baseUrl: 'file:///android_asset/web/'
79
             baseUrl: 'file:///android_asset/web/'
62
         } : { html: this.props.html };
80
         } : { html: this.props.html };
81
+        console.log(this.state.height + this.props.heightOffset);
63
         return (
82
         return (
64
             <View style={[{
83
             <View style={[{
65
                 height: this.state.height + this.props.heightOffset
84
                 height: this.state.height + this.props.heightOffset
66
             }, this.props.style]}>
85
             }, this.props.style]}>
67
                 <RCTAutoHeightWebView
86
                 <RCTAutoHeightWebView
87
+                    style={{ flex: 1 }}
88
+                    javaScriptEnabled={true}
68
                     injectedJavaScript={this.state.script + this.props.customScript}
89
                     injectedJavaScript={this.state.script + this.props.customScript}
69
                     scrollEnabled={false}
90
                     scrollEnabled={false}
70
                     source={source}
91
                     source={source}
71
-                    onNavigationStateChange={this.handleNavigationStateChange} />
92
+                    onLoadingStart={this.onLoadingStart}
93
+                    onLoadingFinish={this.onLoadingFinish} />
72
             </View>
94
             </View>
73
         );
95
         );
74
     }
96
     }
75
 }
97
 }
76
 
98
 
77
 AutoHeightWebView.propTypes = {
99
 AutoHeightWebView.propTypes = {
78
-    ...View.propTypes,
100
+    ...WebView.propTypes,
79
     html: PropTypes.string,
101
     html: PropTypes.string,
80
     onHeightUpdated: PropTypes.func,
102
     onHeightUpdated: PropTypes.func,
81
     customScript: PropTypes.string,
103
     customScript: PropTypes.string,
83
     heightOffset: PropTypes.number,
105
     heightOffset: PropTypes.number,
84
     // baseUrl not work in android 4.3 or below version
106
     // baseUrl not work in android 4.3 or below version
85
     enableBaseUrl: PropTypes.bool,
107
     enableBaseUrl: PropTypes.bool,
86
-    // add web/files... to android/app/src/assets/
108
+    // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
87
     files: PropTypes.arrayOf(PropTypes.shape({
109
     files: PropTypes.arrayOf(PropTypes.shape({
88
         href: PropTypes.string,
110
         href: PropTypes.string,
89
         type: PropTypes.string,
111
         type: PropTypes.string,
91
     }))
113
     }))
92
 }
114
 }
93
 
115
 
94
-const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView);
116
+AutoHeightWebView.defaultProps = {
117
+    enableBaseUrl: false,
118
+    heightOffset: 25
119
+}
95
 
120
 
96
 const BaseScript =
121
 const BaseScript =
97
     `
122
     `