react-native 开发笔记 （四）

2024年3月6日 167次阅读 来源: frontoldman

地理位置定位的使用

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、对细致的每个调用操作做判断，在页面卸载的时候终止这些方法
    原文作者：frontoldman
    原文地址: https://segmentfault.com/a/1190000009576648
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞