1、用户信息的本地化保存
在原生android中用户登录信息的保存可以用SQLite或者是sharedperferences。在React Native中,有一个第三方包提供了类似的保存机制,就是local storage.
react-native-storage
可以同时支持RN和web浏览器的本地化存储。第三方库使用之前需要在你的项目中安装。进入项目的目录:
npm install react-native-storage --save
输入指令进行联网下载安装,成功后输入指令引入到自己编写的js中
import Storage from 'react-native-storage';//存储全局的用户信息
使用思路:当用户第一次进入软件的时候,展示的是登录页面,在constructor中初始化storage对象。并根据保存的key值查询storage中是否有信息,如果有的话、跳转到操作页面。如果没有就继续留在登录界面。
用户输入用户名和密码进行验证的时候。成功会返回用户的token,uid和uname。storage将数据保存到本地,并跳转到下一个页面。
storage初始化+取指定key的数据:
var storage = new Storage({
// 最大容量,默认值1000条数据循环存储
size: 5,
// 存储引擎:对于RN使用AsyncStorage,对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中,重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间,默认一整天(1000 * 3600 * 24 毫秒),设为null则永不过期
defaultExpires: null,
// 读写时在内存中缓存数据。默认启用。
enableCache: true,
// 如果storage中没有相应数据,或数据已过期,
// 则会调用相应的sync方法,无缝返回最新数据。
// sync方法的具体说明会在后文提到
// 你可以在构造函数这里就写好sync的方法
// 或是在任何时候,直接对storage.sync进行赋值修改
// 或是写到另一个文件里,这里require引入 sync: require('你可以另外写一个文件专门处理sync')
})
//获取全局变量的用户名
storage.load({
key: 'loginState',
// autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
autoSync: true,
/// syncInBackground(默认为true)意味着如果数据过期,
// 在调用sync方法的同时先返回已经过期的数据。
// 设置为false的话,则等待sync方法提供的最新数据(当然会需要更多时间)。
syncInBackground: true,
// 你还可以给sync方法传递额外的参数
syncParams: {
extraFetchOptions: {
// blahblah
},
someFlag: true,
},
}).then(ret => {
// 如果找到数据,则在then方法中返回
// 注意:这是异步返回的结果(不了解异步请自行搜索学习)
// 你只能在then这个方法内继续处理ret数据
// 而不能在then以外处理
// 也没有办法“变成”同步返回
// 你也可以使用“看似”同步的async/await语法
console.log(ret.username +"有数据跳转");
console.log(ret.username);
const { navigate } = this.props.navigation;//跳转页面
navigate('Chat');
// navigate('send');//测试页面!!!!sendCode.js用于测试在线料仓,鞥操作
}).catch(err => {
//如果没有找到数据且没有sync方法,
//或者有其他异常,则在catch中返回
console.log(err.message+"没有数据");
switch (err.name) {
case 'NotFoundError':
// TODO;
break;
case 'ExpiredError':
// TODO
break;
}
})
保存信息:
storage.save({
key: 'loginState', //定义key,名字不能有_
rawData: {//数据只要用这个来封装
token: a,//获取到的信息
userid:userid,
username:obj
},
// 如果不指定过期时间,则会使用defaultExpires参数
// 如果设为null,则永不过期
expires: null
});
当用户进行退出登录的时候,需要将此用户保存的信息清除,这个时候使用:
storage.removeItem('loginState');
loginState就是用户信息激励的loginState的key。
简单的封装可以参照转载:https://blog.csdn.net/zach_zhou/article/details/72654690
2、界面的跳转导航react-navigation
使用stackNavigation可以实现页面跳转,跨页面传值,右上角的回退按钮等功能
const SimpleApp = StackNavigator({//导航
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
Mine:{screen:MinePage},
CheckB :{screen:CheckTest},
CheckB1 :{screen:CheckTest1},
Mqtt:{screen:LoginSuccess},
send:{screen:sendCode},
HisList:{screen:HistoryList},
DateSet:{screen:DateSet},
PanKu: { screen: PanKuScreen },
}
);
注册所有页面以及对应的名字
screen: PanKuScreen
是自己编写的js页面。
const { navigate } = this.props.navigation;//跳转页面
navigate('Chat');
使用这个进行不带参数的页面跳转,跳转到‘Chat’为名注册的页面
const { navigate } = this.props.navigation;//跳转页面
navigate('CheckB',{codeId : a});//页面跳转并向下一个页面传递参数
带参数的页面跳转,需要将值放入一个键值对中,在下一个页面中
//页面接收上一个页面传递的参数
this.code = this.props.navigation.state.params.codeId;
获取上一个页面出来的的值。this.props是指父页面传出来的值。
通过Navigation可以设置页面最上面的导航栏的后退以及标题,通过设置Navigation的属性
static navigationOptions = {
headerTitle: 'XXXX列表',
cardStack: {
gesturesEnabled: false // 是否可以右滑返回
}
};
navigationOptions:配置StackNavigator的一些属性。
title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用
header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle:设置导航栏标题,推荐
headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null
headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"
headerRight:设置导航条右侧。可以是按钮或者其他视图控件
headerLeft:设置导航条左侧。可以是按钮或者其他视图控件
headerStyle:设置导航条的样式。背景色,宽高等
headerTitleStyle:设置导航栏文字样式
headerBackTitleStyle:设置导航栏‘返回’文字样式
headerTintColor:设置导航栏颜色
headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0
gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭
我在使用的时候,滑动返回手势不好用。。。
3、fetch进行网络请求:
通过fetch可以进行网络请求,可以设置请求的头,把需要发送的信息放入。接收返回信息的时候用户可以设置信息的类型,方法会帮我们自动解析,并返回一个对象
官方的案例
fetch('https://mywebsite.com/endpoint/', {//请求的ip地址
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},//请求的头部信息
body: JSON.stringify({//要发送的数据
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
在实际应用过程中,我们要把包头和数据组成json形式,再放到fetch函数中
let params = {"username":this.userName,"password":this.password};
const init = {//其中的init是一个Object或者说是一个字典,里面包含了关于请求方式是GET或者POST等的信息。
method: 'POST',
headers:{ 'Accept': 'application/json','Content-Type': 'application/json','Authorization': 'Bearer '+ this.usertoken},
body:JSON.stringify(params),//将用户名和密码的json对象解析成一个字符串,传向服务
};
fetch("http://192.163.0.1:8080/auth", init)
.then((response) => response.json())
.then((responseJson) => {
var a = `${responseJson.token}`;//获取返回的值,返回的是token命名的json
console.log('token =>', a);
//若用户名和密码不存在,则返回的是“undefined”
})
.catch(e => {
alert(`error ${e}`);
console.log(`error ${e}`)
});
首先这里涉及到了let、const、var三中定义变量的方式
1、let是块儿级作用于,在函数中定义let只对函数中的有影响,函数外没有影响。
2、const是定义常亮的。定义后变量不可变,且在定义的时候必须要赋初值。
3、var定义的变量可变。且如果不服初值的话,显示的undefined。
params定义的是在<EditView>中输入的用户名和密码。组织成json类型
init是请求信息:
method:POST/GET
headers是包头,发送和接收的数据都是json形式,然后
Authorization
使用户的token认证信息
baby:因为是post,所以讲params信息写入,并通过JSON.stringify().将数据转成json形式。
再来看看fetch函数。第一个参数是ip地址,然后是信息。
response是返回的信息,要指示他是json类型的
response.json()
然后通过responseJson获取真正的返回信息。