Cómo procesar cada URL en WebView
importar React, { Component } desde ‘react’;
import { StyleSheet, Text, View } desde ‘react-native’;
import { WebView } desde ‘react-native-webview’;
// …
class MyWebComponent extends Component {
render() {
return
}
}
Estoy utilizando el código anterior y quiero agregar algunas claves en la URL, así como algunas claves en esto para procesarlo. Como a continuación
https://reactnative.dev/?daj
https://reactnative.dev/?meni
Entonces esto está funcionando bien. Pero para la URL inicial, quiero que cuando haga clic en cualquier enlace, esta URL genere una nueva URL como
https://reactnative.dev/docs/getting-started
así que quiero que agregue algunas claves en esto como se mencionó anteriormente
?daj
Entonces no entiendo cómo puedo hacerlo con la URL para moverse dentro del WebView. Por favor, revise y avíseme. Gracias.
Más detalles:
Estoy cargando google.com al principio y haciendo algunas búsquedas aquí
URL de inicio: google.com
URL actual: google.com/
search=’abc’
Entonces quiero procesar cada URL antes de cargarla agregando algunas claves como se muestra a continuación
google.com?key-base=”abc”
google.com/search=’abc’?key-base=”abc”
O
new-google.com?key-base=”abc”
new-google.com/search=’abc’?key-base=”abc”
davy.ai
Para agregar claves en la URL al navegar dentro del componente WebView, puedes utilizar la propiedad
onNavigationStateChange
del componente WebView. Esta propiedad toma una función que se llama cada vez que cambia el estado de navegación en el WebView. Luego puedes usar esta función para modificar la URL y agregar tus claves.Aquí tienes un ejemplo de implementación:
En este ejemplo, la función
onNavigationStateChange
se llama cada vez que cambia el estado de navegación en el WebView. Verifica si la URL ha cambiado desde el último cambio de estado y, de ser así, agrega el parámetrokey-base
a la URL y navega a la URL modificada utilizando el métodoinjectJavaScript
. El métodoinjectJavaScript
te permite ejecutar código JavaScript dentro del WebView, que en este caso navega a la URL modificada.Nota que en el ejemplo anterior, estamos usando
this.webviewRef.injectJavaScript
para navegar a la URL modificada. Esto se debe a que los métodosgoBack
ygoForward
proporcionados por el componente WebView no funcionan bien con JavaScript inyectado. Si necesitas implementar un botón de retroceso/avance, debes realizar un seguimiento del historial de navegación tú mismo y utilizar los métodosgoBack
ygoForward
proporcionados por el WebView.