React Native 开发系列7 回顾

react-native | Comments

看了一下第一篇文章的创建时间,5月31号,到今天为止断断续续地开发了将近2个月的时间,做出了一个大致能用的app,刚才已经提交给苹果审核了,希望这最后一步能够顺利完成。

目录

  1. 项目搭建 – 底部导航栏及搜索
  2. 实现搜索 – 调用API及自定义组件
  3. 登录注册 – 使用cookies
  4. 学习卡片 – flash/swipe card
  5. 学习模块,社区,账号设置
  6. 假名标注
  7. 回顾

这几天一直在做上线前的准备工作,按照网上的教程配置了app开发需要的证书,准备截图,今天总算提交审核了。之前的文章因为都是记录开发中遇到的问题,看起来可能都有点散, 今天这篇简单回顾一下整个开发过程。

因为之前开发网站的经历,第一次初始化项目后,就找了一下react native中常用的UI组件和导航栏,觉得应该会有类似Bootstrap的东西,之后用react-navigation先实现了导航栏,然后用react-native-elements里的searchbar放了一个占位的搜索框。

和开发网站一样,写app最先想到的也是做用户系统,实现登录注册。之前已经写好了一个网站souka.io,这个app其实就是网站的客户端(当然做的时候其实改了很多东西),所以app的用户系统是和浏览器一样通过存储cookie来实现的,当时参照的是github上的这个例子react-native-login, 用webview打开网站让用户登录,监听URL变化事件,在登录返回首页后跳转回app。

用户可以登录后,接下来就是要获取数据,实现学习流程。这时候需要调用很多API和服务器交换数据,最开始我是把原生的fetch函数包装了一下,后来改成了用axios,可以方便的设置Referer、User-Agent以及CSRF token。随着开发的进行,开始慢慢熟悉react native里component的写法,后来发现component其实就是用class名代替html里面的div加上一个class而已,这样理解起来就熟悉多了。

从最开始写的SearchResult,到后面的Entry、Course、ProgressBar以及Quote等等,熟悉了react native的开发模式后,其实就是在创建和组合各种component。这期间基本上实现了app的大部分功能,当然偶尔也会碰到一些难以解决的问题,比如把react-native-flip-card放到react-native-tinder-swipe-cards里面的时候,没办法点击,后来是看到这篇介绍PanResponse的文章才知道怎么回事,最后自己fork,修改了部分代码解决了问题。

上线前最后实现的一个功能是例句和quote的假名标注,日语里的假名就像是汉字里的拼音,如果没有标注,对初学者来说,例句基本上就没什么用。找了一下关于日语自然语言处理方面的软件,最后用Mecab实现的分词标注。这是我自己最喜欢的功能,也是唯一一个没有找到现有的开源组件可以使用,最后自己写了一个RubyText组件来render,具体可以参照上一篇里的内容。虽然后来没有完善代码,写成单独的组件传到npm,不过对自己来说,也算是自己实现的第一个可重用的组件。

从最开始简单的Tab导航栏到自己写的RubyText,第一个iOS app的开发历程也算是告一段落,后面会暂时休息一下,考虑一些以后的开发方向。虽然不知道app最终的使用情况会是什么样子,但开发过程自己确学到了很多新的东西,希望这个app最后也能给日语学习的人提供一点帮助。

以上。

Comments