MapPinner: 在地图上留下自己旅行时走过之处的标记

MapPinner

花了5天时间写完了一个软件,叫做MapPinner

这是我第一次正式写安卓app,也是第一次写react native程序,顺便第一次接触typescript(tsx)

react写得很顺native 一言难尽

照样开源到Github,可以到release 下载

b站又介绍视频哦BV1EUb1zEEFi


关于一些第三方库

expo

可以省去一些react native 的麻烦,但是也带来了新的麻烦

由于地图等组件涉及了原生代码所以热重载调试不能用expo go,要用dev client

偷懒不用Android Studio全部用eas构建,结果晚上构建还得排队一个多小时,唉……

由于做几个功能就得添加一个原生库,一共构建了8次

react-native-paper

这是个material 3组件库,是我找到最完善的react native的m3组件库

即使如此,我还是用了,但是我还想吐槽一下

首先是Switch组件,这完全是md2风格的,做都不做了……

然后ToolTip,别人家都是透明背景的,你这就纯黑了……

还有List.AccordionGroup,列表里面的折叠组,不但动画播放一半直接动画结束,展开时子项都还是直接显示的

还有就是TextInput,它的label按照md3的设计,是处于或离开焦点后移到移出左上角,但是对比一下别的组件库,明显可以看出这个组件库的这个动画极其生硬,而且placeholder是直接出现的,因此我故意避免了这两个属性

还有就是Select/Dropdown组件,但是这个这么常见的组件竟然在这个组件库不存在‽‽‽(我用Dialog+List代替的)

还有啊就是Drawer,本来以为直接用的,实际上还得自己导入一个@react-navigation/drawer


开发历程

i18n

一开始呢,想着自己写的,直接一个对象搞定

后来想要搞语言切换,又不知道怎么刷新已经加载好了的的页面,尝试各种方法

把自写改成i18n-js,但是最后也没有做语言切换

地图

一开始我打算用expo-map

结果这玩意要求我必须提供一个可用的Google Map API Key,而且必须要有一个Google标(因为用的是谷歌的引擎)

然后换成了MapLibre

但是右下角有一个info按钮,刚好被我的FAB挡住了

没找到移动那个按钮的相关api,那就移动一下FAB吧

不好看

移回去了

虽然也能按到,当我还是在关于页面加上了那几个链接

定位

这是最头疼的玩意之一

调用不难,问题是这死活获取不到定位

在Dev Client里面基本上获取定位都会报错

想了一想,增加几个权限

变成了有概率报错

最后改成了最高进度失败尝试高精度,高精度失败获取最后可用位置

(打包之后好像一次就定位成功了)

视角移动

可能是因为React特性,只要任意一个state改变,视角就会回到上一次代码改变视角的位置和大小

无论用户怎么更改位置

(懒得解决)

只是在部分场景下增加了一个移动视角到当前视角的

别的懒得解决

还有就是我不设置位置,默认视角就是在0,0 的位置,也就是大西洋某点

这个很好解决

页面跳转

这个动画好爽

_layout.tsx也就是Stack部分做点手脚即可

脑抽bug

复制路线时,我竟然把本来就是JSON的数据又JSON.stringlify

加载的时候写了一个永远为true但是不影响的if表达式

把重启app的代码加在了打开对话框上而不是对话框确认按钮上

识别到经纬度超过范围后没写return;搞得这几行跟没写一样

……