react-native 开发笔记 (四)

前端之家收集整理的这篇文章主要介绍了react-native 开发笔记 (四)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

地理位置定位的使用

rn本身自带的模块Geolocation,可以获取当前地理位置信息,调用getCurrentPosition方法就可以了,这是一个异步方法

Geolocation.getCurrentPosition(
      location => {})
速度:  location.coords.speed 
 经度:  location.coords.longitude +
 纬度:  location.coords.latitude +
 准确度:  location.coords.accuracy +
 行进方向:  location.coords.heading +
 海拔:  location.coords.altitude +
 海拔准确度:  location.coords.altitudeAccuracy +
 时间戳:  location.timestamp;

如果需要计算两个位置之间的距离

export default function getDisance(lat1,lng1,lat2,lng2) {
  var radLat1 = toRad(lat1);

  var radLat2 = toRad(lat2);
  var deltaLat = radLat1 - radLat2;
  var deltaLng = toRad(lng1) - toRad(lng2);

  var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2),2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2),2)));
  var rdis = (dis * 6378137) / 1000;

  return rdis.toFixed(1);
}

react native事件冒泡

曾一度纠结于rn事件如何阻止冒泡的,查遍文章,没有找到相关资料。

后来才发现,有一个办法可以阻止冒泡,那就是在父组件和子组件的中间插入一个Touchable*这样子的组件,这个组件不要绑定事件,这样的话内部的事件是不会冒泡到顶部的

react native多页面鉴权

熟悉做web富客户端,都会需要处理这个权限验证的逻辑。比如判断用户有没有登录,然后做相应的操作或者页面跳转

react-native 也是一样的,做法也没有什么区别。

我的做法比较简单粗暴

一般会封装一个公共的ajax模块,在所有请求之中判断用户有没有过期,过期做相应处理,没有过期则正常响应。正常使用起来,其实是可以使用的,但是也存在一些问题

  1. react-native的fetch本身是可以保存cookie的,这就导致app用户过期时间由服务器配置决定的。那如果app如果需要自己决定用户的过期时长的话,这就需要额外的封装,比如保存账户和密码做自动登录

  2. 一个页面可以有多个请求,不止一个。这些请求在页面加载完成初期,就要去全部加载。
    1、但是如果这时候用户是过期的,请求多个接口是没有必要的。
    2、我们可能的逻辑是在ajax返回未登录的状态之后,我们可能已经跳转首页或者登录页面去了。这时候其他接口如果有不需要鉴权就返回的数据,再去执行逻辑的时候,有可能会引发一起无法预知的错误。而fetch api是不能abort的,

    解决办法我觉着

    1、可以引入GraphQL,这种成本可能很高,因为前后端改动都比较大
       2、对细致的每个调用操作做判断,在页面卸载的时候终止这些方法
原文链接:https://www.f2er.com/react/303915.html

猜你在找的React相关文章