react-native 电影app

Posted on | Edited on | In ,

前言

现在公司给我配了mac，一直在mac上做rn开发，体验非常棒。不过春节在家用mac玩rn的时候，突然发现现在的40版本居然有了watchman，之前版本的reloadjs的Bug也被脸书修复了，现在在windows上做rn开发体验也不错，但是只能做android开发。

一个开源电影app

源码

ios运行效果:

运行效果

android运行截图:

运行效果
运行效果

如果运行报错，请检查

  1. react-native-vector-icons是否配置
  2. /android/app下是否有my-release-key.keystore
  3. 是不是用了cnpm安装依赖，换用npm就没问题（我在公司用的mac，回家用的windows，开始用的cnpm，报的奇葩的错误，换了npm就好了）
  4. 再看看错误信息，自行查找解决方案，如果解决不了，可以提issue

说明

  1. 豆瓣API参考 https://developers.douban.com/wiki/?title=api_v2
  2. 开发过程中最好使用mock server，豆瓣的api有调用限制，频繁调用会被封ip，mock server地址https://github.com/sniperyan/doubanMock
  3. 字体图标使用react-native-vector-icons，安卓和ios使用都需要配置，具体使用方法请参考官方文档https://github.com/oblador/react-native-vector-icons
  4. 豆瓣的API有比较坑的地方，比如/v2/movie/subject/返回的数据里，directors和casts字段里avatars与id属性都可能为null值，所以需要特殊处理，见代码src/components/FilmDetail.js

开发总结

  1. debug js remotely 看不到fetch的请求，mac下用charles抓包
  2. debug js remotely 调试js时候，es6，es7语法是未编译的（目前还未发现类似react开发时候在webpack里配置sourceMap的方法），导致部分地方断点进不去，可以使用console.log输出关键信息
  3. 写样式的时候，没有了chorme方便的样式调试工具，开始的时候非常不习惯也不好排错。可以给组件添加backgroundColor辅助检查，其实后来发现很多错误都是没有设置宽和高造成的，同时也可以用show inspector
  4. 当年搞react时候的react dev tools 不能用了，非常的不爽
  5. 适配手机屏幕，用Dimensions.get('window').width取到屏幕宽度，然后按比例算宽和高度
  6. 不要看中文文档！不要看中文文档！不要看中文文档！重要的事情说3遍，直接看facebook的英文文档！

run on iphone

  1. 点击movie.xcodeproj文件，启动xcode
  2. 在工程目录下，把movieTest目录删除
  3. 添加signing team,修改bundle identifier,如图如图
  4. 选中自己的iPhone，点击build按钮
  5. build success之后，在手机 设置-通用-描述文件与设备管理-开发者应用 内选择信任应用

应用打包

  1. ios app 需要688RMB买一个帐号才能上App Store，实在没钱就算了
  2. 安卓利用gradle打包很简单，修改应用名称：android\app\src\main\res\values\strings.xml, <string name="app_name">MyProject</string>MyProject改成你需要的名字就好了。图标在android\app\src\main\res文件夹下每个mipmap开头的文件夹下有一个不同尺寸的版本，可以自行输出
请我吃辣条~~