native react 登录状态判断

2017-08-02 15:30:14 sinat_17775997 阅读数 4412
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

使用React Native,可以使用NetInfo API获取手机当前的各个网络状态。

componentWillMount() {
      NetInfo.fetch().done((status)=> {
          console.log('Status:'+status);
      });
}

获取网络状态是异步的,上面使用了Promise机制。

Android端网络状态

请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段,申请相关权限:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />



修改完成后,reaload代码是无效的,因为我们修改了Android原生的配置文件,需要重新执行react-native run-android命令。这个命令重新编译对应的Android项目安装包并安装到手机中。

*Android可获取的状态比较多,上面的status可能有如下的值,直接把文档贴出来了:

NONE - 设备处于离线状态
BLUETOOTH - 蓝牙数据连接
DUMMY - 模拟数据连接
ETHERNET - 以太网数据连接
MOBILE - 移动网络数据连接
MOBILE_DUN - 拨号移动网络数据连接
MOBILE_HIPRI - 高优先级移动网络数据连接
MOBILE_MMS - 彩信移动网络数据连接
MOBILE_SUPL - 安全用户面定位(SUPL)数据连接
VPN - 虚拟网络连接。需要Android5.0以上
WIFI - WIFI数据连接
WIMAX - WiMAX数据连接
UNKNOWN - 未知数据连接

*IOS端网络状态

none - 设备处于离线状态。
wifi - 设备处于联网状态且通过wifi链接,或者是一个iOS的模拟器。
cell - 设备是通过Edge、3G、WiMax或是LTE网络联网的。
unknown - 发生错误,网络状况不可知

监听网络改变事件

在获取了网络状态后,开发者还可以通过NetInfo API提供的监听器,监听网络状态改变事件。这样当手机网络状态改变时,React Native应用马上收到通知。

 componentWillMount() {
        NetInfo.fetch().done((status)=> {
            console.log('Status:' + status);
        });
        //监听网络状态改变
        NetInfo.addEventListener('change', this.handleConnectivityChange);

    }

    componentWillUnMount() {
        console.log("componentWillUnMount");
        NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

    handleConnectivityChange(status) {
        console.log('status change:' + status);
        //监听第一次改变后, 可以取消监听.或者在componentUnmount中取消监听
       // NetInfo.removeEventListener('change', this.handleConnectivityChange);
    }

判断是否有网络连接

NetInfo API 为开发者提供了isConnected函数用来判断当前手机是否有网络连接。

NetInfo.isConnected.fetch().done((isConnected) => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

isConnectionExpensive(仅Android端)

NetInfo API为开发者提供了 isConnectionExpensive函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络,或者通过基于移动数据网络所创建的wifi热点,都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});


链接:http://www.jianshu.com/p/f5462c944f7a

2018-09-17 20:02:35 lzy_0710 阅读数 1619
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

登录

import React, { Component } from "react";
import { Alert, View, AsyncStorage, TextInput, Button } from "react-native";

export default class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      psw: ""
    };
  }

  onChangeName = text => {
    this.setState({ name: text });
  };

  onChangePsw = text => {
    this.setState({ psw: text });
  };

  login = async () => {
    if (this.state.name != null && this.state.name != "") {
      if (this.state.psw != null && this.state.psw != "") {
        await AsyncStorage.setItem("name", this.state.name);
        await AsyncStorage.setItem("psw", this.state.psw);

        this.props.navigation.navigate("Home");
      } else {
        Alert.alert("密码不能为空");
      }
    } else {
      Alert.alert("帐号不能为空");
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TextInput
          placeholder="请输入帐号..."
          onChangeText={this.onChangeName}
        />
        <TextInput
          placeholder="请输入密码..."
          onChangeText={this.onChangePsw}
        />
        <Button title="登录" onPress={this.login} />
      </View>
    );
  }
}

判断有没有存入本地

import React, { Component } from "react";
import { View, AsyncStorage, Text } from "react-native";
import {
  StackNavigator,
  createSwitchNavigator,
  createTabNavigator,
  createBottomTabNavigator
} from "react-navigation";
import HomePage from "./HomePage";
import LoginPage from "./LoginPage";

class AuthPage extends Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  _bootstrapAsync = async () => {
    const name = await AsyncStorage.getItem("name");
    const psw = await AsyncStorage.getItem("psw");
    if (name !== null && name != "" && psw != null && psw != "") {
      this.props.navigation.navigate("Home");
    } else {
      this.props.navigation.navigate("Login");
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>qqqqqqq</Text>
      </View>
    );
  }
}

const Switch = createSwitchNavigator({
  Auth: { screen: AuthPage },
  Home: { screen: HomePage },
  Login: { screen: LoginPage }
});

export default Switch;

注销

import React, { Component } from "react";
import { View, Text, Button, AsyncStorage } from "react-native";

export default class HomePage extends Component {
  onClick = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate("Login");
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ textAlign: "center" }}>hello</Text>
        <Button title="注销" onPress={this.onClick} />
      </View>
    );
  }
}

2017-08-04 16:04:12 u011272795 阅读数 1082
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

ReactNative 中有 个模块NetInfo,可以获取设备的联网或者离线状态。

有如下几个方法:

//获知设备联网或离线的状态信息
NetInfo.fetch().done((reach) => {
    //   alert(reach);
});
这个reach为获取到的网络状态,有如下字段:

IOS

以异步的方式判断设备是否联网,以及是否使用了移动数据网络。

  • none - 设备处于离线状态。
  • wifi - 设备处于联网状态且通过wifi链接,或者是一个iOS的模拟器。
  • cell - 设备是通过Edge、3G、WiMax或是LTE网络联网的。
  • unknown - 发生错误,网络状况不可知

Android

请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Android的联网类型:

  • NONE - 设备处于离线状态
  • BLUETOOTH - 蓝牙数据连接
  • DUMMY - 模拟数据连接
  • ETHERNET - 以太网数据连接
  • MOBILE - 移动网络数据连接
  • MOBILE_DUN - 拨号移动网络数据连接
  • MOBILE_HIPRI - 高优先级移动网络数据连接
  • MOBILE_MMS - 彩信移动网络数据连接
  • MOBILE_SUPL - 安全用户面定位(SUPL)数据连接
  • VPN - 虚拟网络连接。需要Android5.0以上
  • WIFI - WIFI数据连接
  • WIMAX - WiMAX数据连接
  • UNKNOWN - 未知数据连接

其他的连接状态已被Android API隐藏,但可以在需要时使用。

因为平台不同导致大小写判断不一致,可以采用如下方式来写:

NetInfo.fetch().done((status) => {
    if (status !== 'none' || status !== 'NONE') {
        this._getNetData();
    } else {
        this.refs.toast.show('网络异常', DURATION.LENGTH_LONG);
    }
})
或者 用方法转换大小写统一判断:

NetInfo.fetch().done((status) => {
    if (status.toLowerCase() !== 'none') {
        this._getNetData();
    } else {
        this.refs.toast.show('网络异常', DURATION.LENGTH_LONG);
    }
})

toLowCase(),toUpperCase()分别为将字符串转换为小写或大写,使用方式为:

String.toLowCase(),  返回一个字符串。

还有另一种方式:

//检查网络是否链接 返回true/fase
NetInfo.isConnected.fetch().done((iscon) => {
    alert(iscon);
})

以及只支持安卓平台的:

isConnectionExpensive

此方法仅Android可用。用于判断当前活动的连接是否计费。如果当前连接是通过移动数据网络,或者通过基于移动数据网络所创建的wifi热点,都有可能被判定为计费的数据连接。

NetInfo.isConnectionExpensive((isConnectionExpensive) => {
  console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
});

最后介绍一个监听网络状态变化的:

//监听网络变化状态
NetInfo.isConnected.addEventListener('isCon', (a) => {
    //  alert(a);
});

每当网络状态变化的时候,都会触发那个回调方法。 参数就是返回的网络状态,



2017-08-22 16:47:16 zzx2436125 阅读数 4841
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

前言

对于网络的判断在日常开发中还是经常碰到的。再此我谈谈我在使用react-native对网络的认识,以及踩过的一些坑。

介绍

react-native提供了自己的API去获取网络状态以及监听网络状态的变换**NetInfo**。
对于**NetInfo**官网的介绍是
    **NetInfo exposes info about online/offline status**

使用

// 获取网络状态
NetInfo.fetch().then((reach) => {
  console.log('Initial: ' + reach);
});

// 获取网络的连接状态
NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

// 增加网络监听
NetInfo.addEventListener(
  'change',
  handleFirstConnectivityChange
);
function handleFirstConnectivityChange(reach) {
  console.log('First change: ' + reach);
  NetInfo.removeEventListener(
    'change',
    handleFirstConnectivityChange
  );
}
主要的方法就是这么多了,接下来就是踩坑的时候了。
在我的项目中主要是用到了获取网络连接状态的方法,可是在这时候坑来了。在android平台时,获取网络状态是没问题的,可是在IOS平台时出问题了,总是不能获取正确的网络状态。经过多方的查询找到了一个合适的解决方法。在获取IOS的网络状态时需要调用一次网络状态改变的监听才能准确获取到网络的链接状态
## 解决方法 ##
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 {
    // android平台也加上这段代码,是为了android网络变化时也能准确获取到网络状态
    await NetInfo.isConnected.addEventListener('change', netChange);
    return await NetInfo.isConnected.fetch();
  }
}

经过这样处理后就可以正确获取双平台的网络状态。不过此处还是有一个小坑,在获取IOS的网络状态时,第一次也是不能正确获取网络状态,以后的每次均能获取成功。处理方法就是在项目初始化后调用一次getNetWorkState()方法。

2017-02-07 13:18:24 lcg910978041 阅读数 2107
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

转:http://blog.csdn.net/yangysng07/article/details/51583604


React Native 获取网络状态 NetworkInfo

React-native提供了了一个NetInfo类用来获取和监听网络状态。

属性与方法

  • 1.addEventListener(eventName:ChangeEventName,handler:Function) 静态方法,用设置网络变化事件监听器,同时需要传入回调的处理方法

  • 2.removeEventListener(eventName:ChangeEventName,handler:Function) 静态方法, 用于移除网络事件变化监听器

  • 3.fetch() 静态方法 检测当前网络连接状态

  • 4.isConnectionExpensve(callback:(metered:?boolean,error?:string)=>void) 静态方法,检测当前连接的网络是否需要计费

  • 5.isConnected :ObjectExpression 当前网络是否连接的属性

构造工具类

NetWorkTool.js

/**
 * Created by eleven on 16/6/3.
 */

import React,{
    NetInfo
} from 'react-native';

const NOT_NETWORK = "网络不可用,请稍后再试";
const TAG_NETWORK_CHANGE = "NetworkChange";

/***
 * 检查网络链接状态
 * @param callback
 */
const checkNetworkState = (callback) =>{
    NetInfo.isConnected.fetch().done(
        (isConnected) => {
            callback(isConnected);
        }
    );
}

/***
 * 移除网络状态变化监听
 * @param tag
 * @param handler
 */
const removeEventListener = (tag,handler) => {
    NetInfo.isConnected.removeEventListener(tag, handler);
}

/***
 * 添加网络状态变化监听
 * @param tag
 * @param handler
 */
const addEventListener = (tag,handler)=>{
    NetInfo.isConnected.addEventListener(tag, handler);
}

export default{
    checkNetworkState,
    addEventListener,
    removeEventListener,
    NOT_NETWORK,
    TAG_NETWORK_CHANGE
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

使用Component.js

//、、、  
import NetWorkTool from '../../utils/NetWorkTool'
//、、、  
handleMethod(isConnected){
       console.log('test', (isConnected ? 'online' : 'offline'));
   }
//、、、
constructor(props) {
    super(props);
    NetWorkTool.checkNetworkState((isConnected)=>{
          if(!isConnected){
                Toast.show(NetWorkTool.NOT_NETWORK);
          }
        });
  }

componentWillMount() {
       NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);
   }

componentWillUnmount() {
      NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);
      }
//、、、
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24