Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

775
Visualizações
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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

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

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda