yyppaag
/
react-native-autoheight-webview
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 30 Wiki Activity
Explorar el Código

Test with spacing (not working)

Onno Schwanen hace 5 años
padre
d4967b8bd8
commit
724fd572bc
Se han modificado 2 ficheros con 20 adiciones y 2 borrados
Dividir vista Mostrar estadísticas de diff
  1. 19
    1
      demo/App.js
  2. 1
    1
      demo/newsletter.js

+ 19
- 1
demo/App.js Ver fichero 

@@ -7,6 +7,8 @@ import {
7 7 
   TouchableOpacity,
8 8 
   Platform,
9 9 
   Linking,
10 
+  Dimensions,
11 
+  View,
10 12 
 } from 'react-native';
11 13
12 14 
 import AutoHeightWebView from 'react-native-autoheight-webview';
 
@@ -104,6 +106,15 @@ const Explorer = () => {
104 106 
   const [heightSize, setHeightSize] = useState({height: 0, width: 0});
105 107 
   const [widthSize, setWidthSize] = useState({height: 0, width: 0});
106 108
109 
+  // set spacing on left/right
110 
+  const spacing = 30;
111 
+
112 
+  // calculate new width of *real* content
113 
+  const screenWidth = Math.round(Dimensions.get('window').width) - 2 * spacing;
114 
+  // For example on iPhone 8, screenWidth will be 315
115 
+
116 
+  // I temporarily hard-coded the width into the newsletter.js its viewport tag
117 
+
107 118 
   return (
108 119 
     <ScrollView
109 120 
       style={{
 
@@ -118,7 +129,14 @@ const Explorer = () => {
118 129 
         scalesPageToFit
119 130 
         scrollEnabled={false}
120 131 
         scrollEnabledWithZoomedin={true}
121 
-        customStyle={heightStyle}
132 
+        customStyle={`
133 
+          ${heightStyle}
134 
+          #rnahw-wrapper {
135 
+            padding: 0 ${spacing}px;
136 
+            width: ${screenWidth};
137 
+            box-sizing: border-box;
138 
+          }
139 
+        `}
122 140 
         onError={onError}
123 141 
         onLoad={onHeightLoad}
124 142 
         onLoadStart={onHeightLoadStart}

+ 1
- 1
demo/newsletter.js Ver fichero 

@@ -3,7 +3,7 @@ export default `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3
3 3 
   <head>
4 4 
     <title>DB BAHN - Current information about your connection:</title>
5 5 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6 
-    <meta name="viewport" content="width=device-width">
6 
+    <meta name="viewport" content="width=315">
7 7 
   </head>
8 8 
   <body style="background-color: rgb(206, 206, 206);margin: 0; width:100%;">
9 9 
     <div id="doc" style="font-family:Arial,sans-serif;font-size:12px;height:100%; min-width: 500px; max-width: 944px; background: #fff; margin: 0; color:#333333">