一款轻阅读应用ReadIT，记录我的RN躺坑之旅

一款轻阅读应用ReadIT，支持功能：优质文章推送、评论点赞、计划制定、计划闹钟、天气预报、收藏文章、深浅两套主题、多语言切换、极光推送等功能。后续还会继续集成功能。前后端均自主研发，借鉴市面较好的种子工程，目前未上应用市场，文章目前也比较少，后续会持续补充优质文章。

展示效果

点我

下载体验（目前只有安卓版）

Github

https://github.com/xiaobinwu/readIt

技能树

1、客户端（react-native、@react-navigation、react-native第三方库、typescript、mobx、marked等技术）

2、中台后管系统（antd4、react、redux、react-router4、hook等技术）

3、后端程序（koa、mongoDb、jsonwebtoken、ali-oss等技术）

react-devtools调试（安卓模拟器）

1、开发者菜单中选择"Debug JS Remotely"选项
2、自动打开调试页面 :8081/debugger-ui（可做断点调试)
3、打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验
4、设置环境变量ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/'，防止下载react-devtool卡住
5、安装react-devtools，package.json配置npm script，执行npm run react-devtools
6、执行adb reverse tcp:8097 tcp:8097
7、目前react-native => 0.61.5，react-devtool => 3.6.3
8、参考资料：参考资料

注意：react-devtools v4 需要 react-native 0.62 或更高版本才能正常工作。一升级就报错，后续跟进

iconfont字体图标使用

1、下载Iconfont字体图标项目，下载至本地，获取iconfont.ttf
2、放至src/assets/fonts目录
3、配置react-native.config.js,参考资料,如下：

module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./src/assets/fonts/"], // stays the same };

4、运行npm run link，将对应iconfont.ttf分别添加至iOS（Info.plist中Fonts provided by application下添加一行iconfont.ttf）、Android（复制至app/src/main/assets/fonts文件夹中，并且app/src/build.gradle添加配置）
5、将iconfont.json复制至src/components/common/iconfont
6、字体图标封装可参考第4步目录相对应组件文件
7、参考资料：参考资料

tsconfig.json配置

1、详细各个配置项解析，可查看tsconfig.json
2、配置paths,结果不起效，需在src目录添加package.json，配置如下

{ "name": "@app" } 第三方库

1、autobind-decorator => 自动将方法绑定到类实例，针对babel7需额外配置插件，如下：

{ plugins: ["@babel/plugin-proposal-decorators", { legacy: true }] }

2、mobx / mobx-react => 简单、可扩展的状态管理，前往
3、@react-navigation/bottom-tabs / @react-navigation/native / @react-navigation/stack => 跨平台导航方案，前往
4、react-native-appearance => 在iOS，Android和Web上访问操作系统外观信息。目前支持检测首选配色方案（浅色/深色），前往
5、react-native-localize => 用于React Native应用本地化的工具箱，前往
6、@react-native-community/async-storage => 简单的、异步的、持久化的 Key-Value 存储系统，前往
7、react-native-actionsheet => 跨平台ActionSheet，前往
8、react-native-webview => WebView,旨在替代内置WebView，前往
9、marked => markdown编译器，前往
10、highlight.js => 代码高亮工具，前往
11、react-native-autoheight-webview => React Native的自动高度webview，前往
12、react-native-image-viewing => 图片滑动浏览控件，前往
13、react-native-root-toast => 吐司控件，前往
14、react-native-calendars => 日历，前往
15、jcore-react-native、jpush-react-native => 极光推送
16、react-native-alarm-clock => 闹钟，前往
17、react-native-amap-geolocation => 高德地址服务，前往
18、 react-native-device-info => 获取设备信息，前往
19、 react-native-image-picker => 上传图片，前往
20、react-native-modal-datetime-picker => 时间选择器，前往
21、react-native-picker-select => 下拉框选择器，前往
22、react-native-splash-screen => 应用启动图，前往

第三方库躺坑 如何获取当前天气、未来三天天气？

使用的是和风天气API，需要经纬入参，所以必须先获取位置，需要申请和风天气的appKey。

推送服务

极光推送服务 jcore-react-native、jpush-react-native，需要申请AppKey。

如何获取位置？

Part1，使用react-native-geolocation-service第三方库，获取经纬度进行高德逆地理编码API调用，获取城市，开启google play服务，需要有处理获取位置的服务程序app/services/location（参考react-native-geolocation-service github example），以及修改android/app/src/main/AndroidManifest.xml，添加<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 安卓添加权限。结果不行，针对google play服务国内不能使用，所以该方案得摒弃掉，对应app/services/location会删除。

Part2，使用react-native-amap-geolocation第三方库，，

图片上传问题

对于react-native-image-picker第三方库， 对于3.1.4版本，minSdkVersion最少要21以上，在使用的react-native 0.61.5下，修改android/build.gradle的minSdkVersion配置