Image 当没有网络（没有internet连接状态）时显示图像图示

我（新手）正在使用react native开发iOS应用程序。我想在应用程序脱机或没有互联网连接时显示一幅图像，以通知用户。我已完成所有必要的设置，如：- 1.我的图像位于src/assets文件夹中 2.在屏幕中使用此图像-当应用程序检测到没有互联网连接时，将显示此图像

在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;

从“React”导入React；
从“react native”导入{视图、样式表、图像、文本}；
const NoInternetScreen=props=>{
返回(
没有互联网连接
)
}
const styles=StyleSheet.create({
图像容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
marginHorizontal:20，
},
图片：{
宽度：160，
身高：220，
对齐自我：“中心”，
},
文本容器：{
澳门时间:15,，
},
正文：{
尺寸：20，
}
});
导出默认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;

import React，{useContext}来自“React”；
进口{
看法
文本，
样式表
}从“反应本机”；
从“../NetworkContext”导入{NetworkContext}；
从“./NoInternetScreen”导入NoInternetScreen；
const Login=props=>{
const isConnected=useContext（NetworkContext）；
返回(
断开连接？
登录
: 
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
}
});
导出默认登录；

你能建议一下可以做些什么来修复它吗

感谢和问候，

---

Ankur

请在我使用的示例中添加一个。