1
votes

Réagissez à la vue Web native lorsque vous n'avez pas Internet

Je souhaite que lorsque la vue Web ne dispose pas d'Internet, affiche un message qui n'a pas Internet. J'ai cherché des choses à ce sujet et je ne les ai pas trouvées. Est-ce que quelqu'un peut m'aider ? Désolé, je suis nouveau avec react-native.

MODIFIER 1

import React, { Component } from 'react'
import { StyleSheet, Text, View, NetInfo } from 'react-native';
import WebViewComp from './web_view_comp.js'

export default class App extends Component {
   constructor(){
      super();
      this.state={
        connection_Status : ""
      }
    }
    componentDidMount() {
      NetInfo.isConnected.addEventListener(
          'connectionChange',
          this._handleConnectivityChange
      );
      NetInfo.isConnected.fetch().done((isConnected) => {
        if(isConnected == true){
          this.setState({connection_Status : "Online"})
        }
        else{
          this.setState({connection_Status : "Offline"})
        }
      });
    }


componentWillUnmount() {
  NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this._handleConnectivityChange
  );
}

_handleConnectivityChange = (isConnected) => {
  if(isConnected == true){
      this.setState({connection_Status : "Online"})
    }
    else{
      this.setState({connection_Status : "Offline"})
    }
};


render() {
      if (this.state.connection_Status == "Online") {
         return (
            <WebViewComp/>
         )
      } else {
         return (
            <View style={styles.MainContainer}>
               <Text style={{fontSize: 20, textAlign: 'center', marginBottom: 20}}> VocÃª estÃ¡ { this.state.connection_Status }</Text>
            </View>
         )
      }
   }
}
const styles = StyleSheet.create({
   MainContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     padding: 20
   },

   TextStyle: {
     fontSize:20,
     textAlign: 'center',
   }

 });

`

J'ai édité le code en fonction de l'aide et je suis arrivé à ce résultat, cependant je crois que si la personne a connecté Internet mobile et n'a pas de données mobiles peut avoir des problèmes.

react-native react-native-android react-native-ios

0 commentaires

3 Réponses :

0
votes

WebView de react-native a un appel d'accessoires onMessage , vous pouvez l'utiliser pour savoir quelle réponse URL lorsque vous n'avez pas Internet.

onWebViewMessage(event: any) {
   let msgData;
    try {
        // msgData will have the url from webview
        // and event have another props
        msgData = event.nativeEvent.data;
        // check and do something
    } catch (err) {
        console.warn(err);
        return;
     }
     ...
}


<WebView
    source={{ uri: "http://www.youtube.com/" }}
    onMessage={this.onWebViewMessage}
    ...
 />

J'espère vous aider, je ne me souviens pas exactement comment l'utiliser, mais je pense que c'est une bonne façon de commencer

1 commentaires

Merci, mais je ne pense pas que je pourrais le faire de cette façon.

1
votes

Vous pouvez utiliser l'événement onError de WebView comme ceci:

//declarations and imports
state={isError:false}
render(){
   return(
       <WebView onError={()=>alert("Something went wrong")} />
       )}

Si vous voulez savoir s'il y a Internet ou non vous gardez une trace de l'erreur de onError.

1 commentaires

Lors de mes recherches sur le sujet, j'ai trouvé ce lien là où utilisé Netinfo comment pourrais-je l'utiliser avec onerror?

1
votes

Vous pouvez utiliser React Native NetInfo , voici un exemple tiré de la documentation:

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

Si vous souhaitez rechercher une URL spécifique, vous pouvez envoyer une requête et mettre à jour l'état

laissez req = wait fetch (' https://www.someurl.com '); laissez isConnected = req.status === 200;

5 commentaires

comment puis-je afficher une page d'erreur en utilisant netinfo? et je pense le supprimer si quelqu'un active Internet.

y a-t-il un moyen de savoir si une URL est active, par exemple un ping. dans la même URL de vue Web?

pour vérifier la connectivité en général, voici un exemple de reactnativecode.com/… en utilisant NetInfo

pour rechercher une URL spécifique, vous pouvez utiliser fetch, je vais l'ajouter à la réponse

vous pouvez désactiver la connexion dans le simulateur pour l'essayer