webview - reales - libro de android studio en español pdf
Reaccionar nativo: ¿es posible tener el alto de un contenido html en una vista web? (3)
Como escribí sobre el comentario anterior, esto es lo que salí a la luz, pero sigo pensando que debería haber una solución mejor.
Aquí está el problema en github Me inspiré en: @hedgerwang respuesta
En mi var html agregué un script simple justo antes de la etiqueta de cierre del cuerpo, simplemente guardo la altura de mi html en el título de mi documento:
<script>window.location.hash = 1;document.title = document.height;</script>
luego agregué los apoyos de NawarigationStateChange en mi componente WebView con una devolución de llamada que estableció una variable de estado de "altura" y luego establecí esta altura en mi WebView. Como dije, el truco fue el mismo, con solo un poco de flahsing mientras cambiaba el contenido en WebView, pero creo que es un truco sucio.
Al final, decidí cambiar la API para tener algo que no tengo que incluir en una WebView
Pero tal vez esto puede ayudar, aquí el código completo.
onNavigationStateChange(navState) {
this.setState({
height: navState.title,
});
}
render() {
var html = ''<!DOCTYPE html><html><body>'' + this.state.pushEvent.Description + ''<script>window.location.hash = 1;document.title = document.height;</script></body></html>'';
return (
<ScrollView>
<View style={styles.recipe}>
<Image source={{uri: this.state.pushEvent.ImageUrl}}
style={styles.imgFull} />
<Text style={styles.title}>{this.state.pushEvent.Title}</Text>
<WebView style={{padding: 20}}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
html={html}>
</WebView>
</View>
</ScrollView>
);
}
Obtengo contenido html de una API y quiero presentarlo como una vista web en mi aplicación.
El componente de vista web está anidado en una vista de desplazamiento porque tiene algunos otros contenidos encima de mi función de renderización, es algo como esto:
render() {
var html = ''<!DOCTYPE html><html><body>'' + this.state.pushEvent.Description + ''</body></html>'';
return (
<ScrollView>
<View style={styles.recipe}>
<Image source={{uri: this.state.pushEvent.ImageUrl}}
style={styles.imgFull} />
<Text style={styles.title}>{this.state.pushEvent.Title}</Text>
<WebView style={{padding: 20}}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
html={html}>
</WebView>
</View>
</ScrollView>
);
}
El problema es que mi html tiene solo 20pt de alto y es mi relleno. ¿Hay alguna manera inteligente de obtener el alto contenido?
Hay una forma mejor de hacerlo: puede inyectar JS personalizado con la propiedad de JavaScript inyectada . El resultado de la evaluación terminará en el objeto del evento que reciba en su onNavigationStateChange . De esta forma, no tendrá que modificar el código HTML ni secuestrar la propiedad del título.
Consulte https://gist.github.com/dbasedow/ed6e099823cb8d5ab30e para ver un ejemplo
Este componente funcionó perfectamente para mí. Ajusta la vista web para que se ajuste al contenido y devuelve la altura del html renderizado.
https://gist.github.com/epeli/10c77c1710dd137a1335
Y cambio
import React, {WebView, View, Text} from "react-native";
para
import React from "react";
import {WebView, View, Text} from "react-native";
en la parte superior del archivo.