React Native使用NetInfo对当前系统网络的判断
有网状态:
断网状态:
代码如下:
注意:第一次参考了http://www.hangge.com/blog/cache/detail_1614.html代码,一直显示的是unknow状态。。。
最后处理代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NetInfo
} from 'react-native'; // 参考博客: http://blog.csdn.net/zzx2436125/article/details/77482308
import App from './App'; class Root extends React.Component { //构造函数
constructor(props) {
super(props);
this.state = {
isConnected: null,
connectionInfo: null
};
} //页面的组件渲染完毕(render)之后执行
componentDidMount() { //检测网络是否连接
NetInfo.isConnected.fetch().done((isConnected) => {
this.setState({isConnected});
}); //检测网络连接信息
NetInfo.fetch().done((connectionInfo) => {
this.setState({connectionInfo});
// alert(connectionInfo);
}); //监听网络变化事件
NetInfo.addEventListener('change', (networkType) => {
this.setState({isConnected: networkType})
alert(networkType);
})
} async componentWillMount() {
let connect = false;
const netChange = (isConnect) => {
// NetInfo.isConnected.removeEventListener('change', netChange);
connect = isConnect;
} // RN获取网络状态(true/false)
async function getNetWorkState() {
if (Platform.OS === 'ios') {
// alert(connect);
await NetInfo.isConnected.addEventListener('change', netChange);
return connect;
} else {
return await NetInfo.isConnected.fetch();
}
}
return await NetInfo.isConnected.addEventListener('change', netChange);
} // 移除监听
componentWillUnMount() {
NetInfo.removeEventListener('change', netChange);
} render() {
return (
<App />
)
}
} export default Root;
总结:
这个检测网络状态他是实时检测断网和联网状态的,可以保存状态,每次请求的时候直接取状态即可。
React Native使用NetInfo对当前系统网络的判断的更多相关文章
- React Native探索(五)使用fetch进行网络请求
相关文章 React Native探索系列 前言 React Native可以使用多种方式来请求网络,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLH ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- Facebook React Native 配置小结
2015 年 9 月 15 号,React Native for Android 发布.至此,React 基本完成了对多端的支持.基于 React / React Native 可以: H5, And ...
- React Native 在 Airbnb(译文)
在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...
- React Native之Fetch简单封装、获取网络状态
1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...
- React Native 在用户网络故障时自动调取缓存
App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...
- [React Native]获取网络状态
使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...
- android翻译应用、地图轨迹、视频广告、React Native知乎日报、网络请求框架等源码
Android精选源码 android实现高德地图轨迹效果源码 使用React Native(Android和iOS)实现的 知乎日报效果源码 一款整合百度翻译api跟有道翻译api的翻译君 RxEa ...
随机推荐
- CrawlSpider ---> 通用爬虫 项目流程
通用爬虫 通用网络爬虫 从互联网中搜集网页,采集信息,这些网页信息用于为搜索引擎建立索引从而提供支持,它决定着整个引擎系统的内容是否丰富,信息是否即时,因此其性能的优劣直接影响着搜索引擎的效果. 不扯 ...
- 队列(queue)和堆栈(stack)的学习
队列 1 . 先进先出 .队列尾进行插入,队列头进行删除,获取,修改. -----first come ,first served . --first in .first out ...
- Java8-Lambda-No.04
public class Lambda4 { static int outerStaticNum; int outerNum; void testScopes() { int num = 1; Lam ...
- 用CSS实现定位DIV绝对位于网页底部
网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG.尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美. 下面是我找到的一个比较完美的方法,来自国外的设计达人, ...
- 【基础算法-树状数组】入门-C++
目录 基本定义 如何理解树状数组 主要操作 @ 基本定义 树状数组(Binary Indexed Tree(B.I.T), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据结构. ...
- .NET调用AS/400上的程序(.NET CALL AS/400 PGM)
http://www.3rgb.com/entry/dotnet_call_as400_program2 .NET连接AS400出现[Safe handle has been closed http: ...
- wangEditor实现ctrl+v粘贴word图片并上传
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- RNN(二)——基于tensorflow的LSTM的实现
lstm的前向结构,不迭代 最基本的lstm结构.不涉及损失值和bp过程 import tensorflow as tf import numpy as np inputs = tf.placehol ...
- 沙雕题目 来自luogu
P5316 恋恋的数学题 题目描述 现在恋恋正在处理的题目十分简单:现在有k (2≤k≤4)k \space (2\leq k\leq 4)k (2≤k≤4)个数,恋恋不知道它们分别是几,只知道它们两 ...
- Codeforces 1239D. Catowice City
传送门 如果选择 $i$ 当陪审团成员,那么 $i$ 认识的猫一定不能参加 又因为总人数和猫数要为 $n$ ,那么 $i$ 认识的猫 的主人也一定要当陪审团成员(不然总数不够) 所以可以考虑这样构图, ...