Selaa lähdekoodia

scrollable webview

David 9 vuotta sitten
vanhempi
commit
cc3aeafd34
1 muutettua tiedostoa jossa 16 lisäystä ja 6 poistoa
  1. 16 6
      src/scenes/Clase/Teoria.js

+ 16 - 6
src/scenes/Clase/Teoria.js

@@ -1,23 +1,33 @@
 import React, { Component } from 'react';
-import { Text, WebView, View, TouchableOpacity } from 'react-native';
+import { Text, WebView, ScrollView, TouchableOpacity } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import { Card, CardSection, Button } from '../../components/common';
 import Header from './Header';
 
 class Teoria extends Component {
+	state = { webViewHeight: 200 };
+
 	render() {
+		const script = '<script>function p(){ window.postMessage(document.body.scrollHeight); } setInterval(p, 10000);</script>'
+		const body = `<html><head>${script}</head><body>${this.props.texto}</body></html>`;
 		return (
-			<View style={{ flex: 1 }}>
+			<ScrollView style={{ flex: 1 }}>
 				<Header titulo={this.props.titulo} profesor={this.props.profesor} fecha={this.props.fecha} />
 		        <CardSection style={{ flex: 1, alignItems: 'stretch' }}>
 		            <WebView
-		              scalesPageToFit={true}
-		              javaScriptEnabled={false}
-		              source={{ html: this.props.texto}} />
+					  scrollEnabled={false}
+					  onMessage={this.updateWebViewHeight.bind(this)}
+					  automaticallyAdjustContentInsets={true}
+					  style={{ height: this.state.webViewHeight }}
+		              source={{ html: body }} />
 		        </CardSection>
-			</View>
+			</ScrollView>
 		);
 	}
+    updateWebViewHeight(event) {
+		const height = event.nativeEvent.data;
+        this.setState({webViewHeight: parseInt(height)});
+    }
 }
 
 export default Teoria;