背景
一款轻浏览利用ReadIT，反对性能：优质文章推送、评论点赞、打算制订、打算闹钟、天气预报、珍藏文章、深浅两套主题、多语言切换、极光推送等性能。后续还会持续集成性能。前后端均自主研发，借鉴市面较好的种子工程，目前未上利用市场。
展现成果
点我
下载体验（目前只有安卓版）
Github
https://github.com/xiaobinwu/...
技能树
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、主动关上调试页面 http://localhost:8081/debugge...（可做断点调试)
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，须要经纬入参，所以必须先获取地位。
推送服务
极光推送服务 react-native-jpush
如何获取地位？
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配置
阿里oss aliyun-oss-rn，须要更改aliyun-oss-rn npm包的android/build.gradle（如下配置）,进步SDK版本号，以及批改主我的项目AndroidManifest.xml,增加android:allowBackup="true",目前应用上仍有问题，于是放弃该计划，改用oss postObject直传形式，参考资料，应用sts长期受权、policy、Signature配合上传。
buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tools.build:gradle:1.3.1' }}apply plugin: 'com.android.library'android { compileSdkVersion 28 buildToolsVersion '28.0.3' defaultConfig { minSdkVersion 21 targetSdkVersion 28 versionCode 1 versionName "1.0" } lintOptions { abortOnError false }}repositories { mavenCentral()}dependencies { implementation 'com.facebook.react:react-native:+' implementation 'com.aliyun.dpa:oss-android-sdk:+'} 日历问题
react-native-calendars的Agenda问题如下：
一、国际化切换、主题切换时，日历没有对应切换，对应HACK解决办法，给Agenda组件设置key，强制组件卸载，从新加载
二、Agenda在国际化切换、主题切换、增加日程的时候，会导致Agenda组件外部View组件onLayout反复触发（我是不须要其始终触发），导致this.viewHeight始终发生变化，导致每次动画执行定位不准问题，解决办法，用个变量存储this.viewHeight，示例代码如下：
let VIEW_HEIGHT = 0;constructor(props) { this.viewHeight = VIEW_HEIGHT || windowSize.height;}onLayout = event => { if (!VIEW_HEIGHT) { VIEW_HEIGHT = event.nativeEvent.layout.height; this.viewHeight = event.nativeEvent.layout.height; this.viewWidth = event.nativeEvent.layout.width; this.forceUpdate(); }};三、日程列表革新，只显示以后选中日期的的日程，Agenda组件代码革新如下：
renderReservations() { const reservationListProps = extractComponentProps(ReservationList, this.props); let reservations = {}; const { items } = this.props; if (this.props.selected && items[this.props.selected.dateString]) { reservations = { [this.props.selected.dateString]: items[this.props.selected.dateString] }; } console.log(this.props.selected, '选中的工夫'); return ( <ReservationList {...reservationListProps} ref={c => (this.list = c)} reservations={reservations} selectedDay={this.state.selectedDay} topDay={this.state.topDay} onDayChange={this.onDayChange} onScroll={() => {}} /> ); }闹钟问题
react-native-alarm-clock,目前yarn、npm均不能下载1.0.0，只能将2.0.0版本下载至本地，替换node_moudules中的对应npm包，性能应用还未考据，仍有问题。
抉择下拉框问题
react-native-picker-select，报错信息 "RNCAndroidDialogPicker" was not found in the UIManager，参考Issues，解决办法，降级@react-native-picker/picker 至 1.8.3
打包 APK 问题
管理员CMD，参考
#keytool -genkey -dname "CN=wushaobin,OU=集体,O=集体,L=深圳,ST=广东,C=CN" -alias test -keyalg RSA -validity 400000 -keystore test.keystore #keytool -importkeystore -srckeystore test.keystore -destkeystore test.keystore -deststoretype pkcs12 #keytool -list -v -keystore test.keystore -storepass xxxxxxxxx 或 keytool -genkeypair -v -keystore test.keystore -alias test -keyalg RSA -keysize 2048 -validity 400000 app利用启动图
1、下载react-native-splash-screen
2、android/app/src/main/java/com/readit/MainActivity.java，配置如下：
import com.facebook.react.ReactActivity;+ import org.devio.rn.splashscreen.SplashScreen;+ import android.os.Bundle;public class MainActivity extends ReactActivity { /**@@ -12,4 +15,11 @@ protected String getMainComponentName() { return "readIt"; } // 增加上面办法 + @Override + protected void onCreate(Bundle savedInstanceState) { + SplashScreen.show(this); // here + super.onCreate(savedInstanceState); + }}3、android/app/src/main/res/layout/launch_screen.xml配置如下(没有就增加)：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" /></LinearLayout> 4、android/app/src/main/res/values/styles.xml配置如下：
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:textColor">#000000</item> + <!--增加这一行--> + <item name="android:windowIsTranslucent">true</item> </style>5、应用如下：
import SplashScreen from 'react-native-splash-screen';...componentDidMount() { SplashScreen.hide();}app利用图标问题
替换android/app/src/main/res/mipmap-*文件夹中图标图片
./gradlew assembleRelease失败问题
1、先执行./gradlew clean，卸载上一个debug版本
2、再执行./gradlew assembleRelease，生成人release版本
罕用指令 ./gradlew clean、./gradlew build
The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build. 问题
参考： https://forums.expo.io/t/kotl...
./gradlew assembleRelease 失败 Error: ENOENT: no such file or directory, open 'F:\Project\reactnative\readIt\android\app\build\generated\sourcemaps\react\release\index.android.bundle.map'问题
参考： https://stackoverflow.com/que...
公布版本时，删除build/debug.apk，执行./gradlew clean
React Native Android9.0以上打包apk后http申请不到解决办法
参考资料