React-Native Показывает иллюстрацию изображения, когда нет сети (нет соединения типа inte rnet) - PullRequest
Новая
       41

React-Native Показывает иллюстрацию изображения, когда нет сети (нет соединения типа inte rnet)

0 голосов
/ 19 марта 2020

Я (newb ie) работаю над приложением iOS, использующим реагирующую нативную версию. Я хочу показать иллюстрацию изображения, когда приложение отключается или отсутствует соединение inte rnet для информирования пользователя. Я выполнил все необходимые настройки, такие как: - 1. Мое изображение в папке src / assets 2. Использование этого изображения на экране - которое будет отображаться, когда приложение не обнаружит соединение inte rnet.

In iOS симулятор работает нормально, но когда я запускаю его на iPhone, он не показывает, что на изображении появляется только текст.

NoInternetScreen. js

import React from 'react';
import {View, StyleSheet, Image, Text} from 'react-native';

const NoInternetScreen = props => {

    return(
        <View style={styles.imageContainer}>
            <Image style={styles.image} source={require('../assets/NoConnection.png')}/>
            <View style={styles.textContainer}>
             <Text style={styles.text}>No Internet connection</Text>
            </View>

        </View>
    )

}

const styles = StyleSheet.create({

    imageContainer: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 20,
    },
    image: {
        width: 160,
        height: 220,
        alignSelf: 'center',
    },
    textContainer: {
        marginVertical: 15,

    },
    text: {
        fontSize: 20,
    }

});

export default NoInternetScreen;

Login. js - который использует NoInternetScreen 

import React, {useContext} from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import {NetworkContext} from '../NetworkContext';
import NoInternetScreen from './NoInternetScreen';

const Login =  props => {

  const isConnected = useContext(NetworkContext);

  return (
    isConnected ? <View style={styles.container}>
      <Text> Login </Text>
    </View> : <NoInternetScreen/>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

export default Login;

Не могли бы вы предложить, что можно сделать, чтобы это исправить?

Спасибо и С уважением, Анкур

...