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;
搞得这几行跟没写一样
……