Ver código fonte

added zoomable prop for ios

Pavel T 5 anos atrás
pai
commit
b6b1ba5c5b
4 arquivos alterados com 14 adições e 9 exclusões
  1. 2
    0
      README.md
  2. 4
    2
      autoHeightWebView/index.js
  3. 7
    7
      autoHeightWebView/utils.js
  4. 1
    0
      index.d.ts

+ 2
- 0
README.md Ver arquivo

51
     }]}
51
     }]}
52
     // or uri
52
     // or uri
53
     source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
53
     source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
54
+    // disables zoom on ios (true by default)
55
+    zoomable={false}
54
     /* 
56
     /* 
55
     other react-native-webview props
57
     other react-native-webview props
56
     */
58
     */

+ 4
- 2
autoHeightWebView/index.js Ver arquivo

98
   customStyle: PropTypes.string,
98
   customStyle: PropTypes.string,
99
   // webview props
99
   // webview props
100
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
100
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
101
-  onMessage: PropTypes.func
101
+  onMessage: PropTypes.func,
102
+  zoomable: PropTypes.bool,
102
 };
103
 };
103
 
104
 
104
 let defaultProps = {
105
 let defaultProps = {
105
   showsVerticalScrollIndicator: false,
106
   showsVerticalScrollIndicator: false,
106
   showsHorizontalScrollIndicator: false,
107
   showsHorizontalScrollIndicator: false,
107
   originWhitelist: ['*'],
108
   originWhitelist: ['*'],
108
-  baseUrl: 'web/'
109
+  baseUrl: 'web/',
110
+  zoomable: true,
109
 };
111
 };
110
 
112
 
111
 Platform.OS === 'android' &&
113
 Platform.OS === 'android' &&

+ 7
- 7
autoHeightWebView/utils.js Ver arquivo

28
   `;
28
   `;
29
 
29
 
30
 // add viewport setting to meta for WKWebView
30
 // add viewport setting to meta for WKWebView
31
-const makeScalePageToFit = `
31
+const makeScalePageToFit = zoomable => `
32
 var meta = document.createElement('meta'); 
32
 var meta = document.createElement('meta'); 
33
 meta.setAttribute('name', 'viewport'); 
33
 meta.setAttribute('name', 'viewport'); 
34
-meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
34
+meta.setAttribute('content', 'width=device-width, user-scalable=${zoomable ? 'yes' : 'no'}'); document.getElementsByTagName('head')[0].appendChild(meta);
35
 `;
35
 `;
36
 
36
 
37
-const getBaseScript = style =>
37
+const getBaseScript = props =>
38
   `
38
   `
39
   ;
39
   ;
40
   if (!document.getElementById("rnahw-wrapper")) {
40
   if (!document.getElementById("rnahw-wrapper")) {
45
     }
45
     }
46
     document.body.appendChild(wrapper);
46
     document.body.appendChild(wrapper);
47
   }
47
   }
48
-  var width = ${getWidth(style)};
48
+  var width = ${getWidth(props.style)};
49
   ${updateSizeWithMessage('wrapper')}
49
   ${updateSizeWithMessage('wrapper')}
50
   window.addEventListener('load', updateSize);
50
   window.addEventListener('load', updateSize);
51
   window.addEventListener('resize', updateSize);
51
   window.addEventListener('resize', updateSize);
52
   ${domMutationObserveScript}
52
   ${domMutationObserveScript}
53
-  ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
53
+  ${Platform.OS === 'ios' ? makeScalePageToFit(props.zoomable) : ''}
54
   updateSize();
54
   updateSize();
55
   `;
55
   `;
56
 
56
 
96
 `;
96
 `;
97
 
97
 
98
 const getScript = props => {
98
 const getScript = props => {
99
-  const { files, customStyle, customScript, style } = props;
100
-  let script = getBaseScript(style);
99
+  const { files, customStyle, customScript } = props;
100
+  let script = getBaseScript(props);
101
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
101
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
102
   script = appendStylesToHead({ style: customStyle, script });
102
   script = appendStylesToHead({ style: customStyle, script });
103
   customScript && (script = customScript + script);
103
   customScript && (script = customScript + script);

+ 1
- 0
index.d.ts Ver arquivo

24
     style: ViewStyle;
24
     style: ViewStyle;
25
     customScript: string;
25
     customScript: string;
26
     customStyle: string;
26
     customStyle: string;
27
+    zoomable: boolean;
27
 }
28
 }
28
 
29
 
29
 export default class AutoHeightWebView extends Component<Partial<AutoHeightWebViewProps>> {}
30
 export default class AutoHeightWebView extends Component<Partial<AutoHeightWebViewProps>> {}