背景
一款轻浏览利用 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 申请不到解决办法
参考资料