Nichts anzeigen, wenn eine Internetverbindung mit react-native-offline besteht

Question

Ich verwende das react-native-offline-Modul. Ich möchte einen Fehler anzeigen, wenn keine Verbindung besteht. Ich verwende withNetworkConnectivity, um roten Text anzuzeigen, wenn das Internet ausgeschaltet ist. Hier ist mein Code:

import React from 'react'; 
import { View, Text } from 'react-native'; 
import { withNetworkConnectivity } from 'react-native-offline'; 

const ConnectionStatus = ({ isConnected }) => (
    <View style={styles.viewStyle}> 
    <Text style={styles.textStyle}>{isConnected ? '' : 'You are offline. Make sure your device is connected'}</Text> 
    </View> 
); 

const styles = { 
    viewStyle: { 
    height: 20, 
    marginTop: 20, 
    alignItems: 'center', 
    flex: 0.1 
    }, 
    textStyle: { 
    alignSelf: 'center', 
    color: 'red', 
    fontSize: 20, 
    } 
}; 

export default withNetworkConnectivity()(ConnectionStatus); 

Das Problem ist jedoch, dass auch bei Internet der Raum von oben View-Tag vertreten ist immer noch vorhanden ist. Wie stelle ich sicher, dass meine Komponente nur Platz beansprucht, wenn keine Verbindung besteht?

Answer 1

Sie müssen Ihre Textkomponente optional rendern.

const renderText =() => { 
    if (!isConnected) { 
     return <Text> Your error Text </Text>; 
    } 
}; 

const ConnectionStatus = ({ isConnected }) => (
    <View style={styles.viewStyle}> 
    {renderText()} 
    </View> 
);