• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

660
Views
react-native-webview no funciona según lo previsto en Android

Tengo una aplicación nativa de reacción simple con un par de pantallas nativas de reacción y una de ellas tiene una vista web, esta vista web es una página que abre otras páginas al hacer clic en un botón como este (desde la vista web principal al hacer clic se abre otra página (2) , de la página 2 abre la página 3: ingrese la descripción de la imagen aquí

El problema es el botón de retroceso del hardware de Android, si estoy en la página 3 y presiono ese botón, se me redirigirá a la pantalla nativa de reacción anterior, no a la página 2. Intenté solucionar esto implementando el siguiente código:

 import React, {useState, useEffect, useRef, useCallback} from 'react'; import {WebView} from 'react-native-webview'; import {BackHandler, Text} from 'react-native'; const MainWebviewPage= ({navigation}) => { const webViewRef = useRef(); const [canGoBack, setCanGoBack] = useState(false); const handleBack = useCallback(() => { if (canGoBack && webViewRef.current) { webViewRef.current.goBack(); return true; } return false; }, [canGoBack]); useEffect(() => { BackHandler.addEventListener('hardwareBackPress', handleBack); return () => { BackHandler.removeEventListener('hardwareBackPress', handleBack); }; }, [handleBack]); useEffect(() => { webViewRef.current.reload(); }, []); return ( <WebView scalesPageToFit={false} ref={(ref) => (webViewRef.current = ref)} source={{uri:url} onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)} /> ); }; export default MainWebviewPage;

Este código funciona parcialmente (si estoy en la página 3 y hago clic en el botón Atrás de Android, seré redirigido a la página 2), pero cuando estoy en la página principal de la vista web y hago clic en el botón Atrás de Android, la pantalla se volverá a cargar. y todavía estoy en esta página o es una página en blanco, para llegar a la pantalla nativa de reacción anterior, necesito hacer clic en el botón Atrás dos veces. Si elimino el código anterior y estoy en la página 3 y hago clic en el botón Atrás, seré redirigido a la pantalla nativa de reacción (no a la página 2). No puedo entender por qué el comportamiento del botón Atrás es tan diferente.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

En handleBackButtonPress , si no hay una página posterior de la vista web, simplemente use la navigation.goBack() y devuelva true :

 const MainWebviewPage= ({navigation}) => { const webViewRef = useRef(); const [canGoBack, setCanGoBack] = useState(false); const handleBack = useCallback(() => { if (canGoBack && webViewRef.current) { webViewRef.current.goBack(); return true; } else { // Add code to navigate to previous app screen: navigation.goBack(); //<-- use the navigation module here /** * When true is returned the event will not be bubbled up * & no other back action will execute */ return true; } /** * Returning false will let the event to bubble up & let other event listeners * or the system's default back action to be executed. */ return false; }, [canGoBack]); useEffect(() => { BackHandler.addEventListener('hardwareBackPress', handleBack); return () => { BackHandler.removeEventListener('hardwareBackPress', handleBack); }; }, [handleBack]); useEffect(() => { webViewRef.current.reload(); }, []); return ( <WebView scalesPageToFit={false} style={{flex: 1, marginTop: 40, width: 400, height: 600}} ref={ref => (webViewRef.current = ref)} source={{uri: 'http://stackoverflow.com'}} onLoadProgress={event => setCanGoBack(event.nativeEvent.canGoBack)} /> ); };

Nota: creo que usando

 onNavigationStateChange={(navState) => { setCanGoBack(navState.canGoBack)} }

también podría ser una buena opción para configurar el canGoBack

Fuentes para algunos comentarios en el código anterior y más detalles aquí:

https://reactnative.dev/docs/backhandler

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onnavigationstatechange

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error