React Native (二)

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获取真正的返回信息。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值