React Native

react-native 侧滑组件SwipeableFlatList 单项侧滑解决 做过移动开发的同学都应该清楚，侧滑删除是移动开发中的一个常见功能。在官方没提供侧滑组件之前，要实现侧滑效果需要使用第三方库，如 react-native-swipe-list-view 。不过随着React Native 0.50版本的发布，系统新添加 SwipeableFlatList 组件，SwipeableFlatList是在FlatList基础上实现的侧滑显示菜单的功能，大大的方便了开发。 SwipeableFlatList支持FlatList的所有的属性和方法，另外它还有三个自己的属性，在使用SwipeableFlatList实现侧滑效果时需要处理这三个属性。 bounceFirstRowOnMount: bool 是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item； maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离 renderQuickActions：func，必须要赋值，表示滑动显示的内容。 下面让我们实现一个简单的侧滑删除的实例，其效果如下： /** * Sample React Native App * https://github.com/facebook/react-native * *

做应用肯定不可能就一个界面，所以这里涉及到我们界面跳转的问题，那RN是怎么利用导航器来实现跳转的呢？我们结合官网给出的例子进行分析，后面笔者发现其实RN的某些思路其实跟Android大同小异，如果你对Android的启动模式有了解还有Android的栈的理解，我相信理解这个应该不会很复杂 D） 首先如果想用react-navigation就要先安装它， react-navigation 在React Native项目中安装。所以我们需要cmd指令进入项目文件夹之后进行如下命令： npm install --save react-navigation 下载react-navigation 接下来，安装react-native-gesture-handler npm install --save react-native-gesture-handler 链接所有本机依赖项 react-native link react-native-gesture-handler ios的同学就不需要这么做了…… 要完成针对Android的react-native-gesture-handler的安装，请务必对以下内容进行必要的修改 MainActivity.java ： import com.facebook.react.ReactActivity ; import com.facebook

高德地图：官方AP误差很大，不稳定。 import com.amap.api.maps.AMapUtils; public void calc(double lat, double lng, double latitude, double longitude, final Promise promise) { try { Number space = AMapUtils.calculateLineDistance( new LatLng(lng, lat), new LatLng(longitude, latitude) ); promise.resolve(space); } catch (Exception e) { promise.reject(e); } } 根据2组经纬度，计算两点之间的距离（JavaScript计算两组坐标之间的距离）： function getDistance(start, end) { var lon1 = (Math.PI / 180) * start.longitude; var lat1 = (Math.PI / 180) * start.latitude; var lon2 = (Math.PI / 180) * end.longitude; var lat2 = (Math.PI / 180) * end.latitude; // 地球半径

1.x和2.x版本 yarn add react-navigation # or with npm # npm install --save react-navigation 3.x版本 yarn add react-navigation # or with npm # npm install react-navigation yarn add react-native-gesture-handler react-native-reanimated # or with npm # npm install react-native-gesture-handler react-native-reanimated 1.如果你的 ReactNative版本 是 0.59 及以下，还需要手动通过link命令添加依赖 react-native link react-native-reanimated react-native link react-native-gesture-handler link后IOS的设置就完成了，但在Android端还需要一些配置。 对于react-native-gesture-handler这个库还需要做如下配置： 在项目根目录Android中MainActivity.java文件中，添加如下配置： package com.reactnavigation