一款輕閱讀應用ReadIT,記錄我的RN躺坑之旅
背景
一款輕閱讀應用ReadIT,支援功能:優質文章推送、評論點贊、計劃制定、計劃鬧鐘、天氣預報、收藏文章、深淺兩套主題、多語言切換、極光推送等功能。後續還會繼續整合功能。前後端均自主研發,借鑑市面較好的種子工程,目前未上應用市場,文章目前也比較少,後續會持續補充優質文章。
展示效果
read-it.oss-cn-shenzhen.aliyuncs.com/sys/5972ebea149738f80f8ed11aed7dec22.mp4
Github
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、自動開啟除錯頁面 )
3、開啟有異常時暫停(Pause On Caught Exceptions)選項,能夠獲得更好的開發體驗
4、設定環境變數ELECTRON_MIRROR=''
,防止下載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
注意: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步目錄相對應元件檔案
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,旨在替代內建WebViewom/react-native-webview/react-native-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
,新增
安卓新增許可權。結果不行,針對google play服務國內不能使用,所以該方案得摒棄掉,對應app/services/location
會刪除。
圖片上傳問題
對於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] github.com/lawnstarter/react-native-picker-select/issues/402 ,解決辦法,降級@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
配置如下(沒有就新增):
4、android/app/src/main/res/values/styles.xml
配置如下:
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. 問題解決方案:
./gradlew assembleRelease 編譯失敗
失敗資訊: Error: ENOENT: no such file or directory, open ‘F:ProjectreactnativereadItandroidappbuildgeneratedsourcemapsreactreleaseindex.android.bundle.map’
釋出版本時,刪除build/debug.apk
,執行./gradlew clean
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/758/viewspace-2797811/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- RN 踩坑:雜記
- 閱讀部落格--《我們應當怎樣做需求分析?》筆記記錄筆記
- Hive Tutorial 閱讀記錄Hive
- 我的學習(踩坑)記錄
- RIPS原始碼閱讀記錄(二)原始碼
- React Native踩坑日記 —— tailwind-rnReact NativeAI
- 【閱讀記錄】App介紹(記錄你的每一次讀書進度)APP
- Vue2.x 響應式部分原始碼閱讀記錄Vue原始碼
- 《遙感雲端計算與科學分析——應用與實踐》閱讀記錄
- VPS折騰記七搭建稍後閱讀應用
- Mac書籤閱讀寫作助手,量身定做筆記,體驗輕鬆閱讀Mac筆記
- presto官網閱讀記錄: Functions and Operators 部分RESTFunction
- String(JDK1.8)原始碼閱讀記錄JDK原始碼
- Redis閱讀目錄Redis
- 《learn to count everything》論文閱讀、實驗記錄
- c語言-記錄閱讀《c缺陷與陷阱》C語言
- RSIC-V指令集——spec閱讀記錄
- 多頁應用 Webpack4 配置優化與踩坑記錄Web優化
- JB的閱讀之旅-軟體測試52講(上)
- JB的閱讀之旅-軟體測試52講(下)
- 閱讀筆記筆記
- 我們的『閱讀理解』出了錯
- [論文閱讀] RNN 在阿里DIEN中的應用RNN阿里
- [React Native]一款RSS閱讀器React Native
- NeurIPS 今年共收錄1900篇論文,我該怎麼閱讀?
- 記錄Jackson和Lombok的坑Lombok
- 關於輕應用,我有話要說...
- JDK原始碼閱讀:Object類閱讀筆記JDK原始碼Object筆記
- JDK原始碼閱讀:String類閱讀筆記JDK原始碼筆記
- 站長,我的閱讀量哪去了?
- 我的Docker之旅,文章目錄,歡迎關注Docker
- 閱讀筆記2筆記
- 閱讀筆記1筆記
- gdbOF閱讀筆記筆記
- 閱讀筆記5筆記
- 閱讀筆記8筆記
- 閱讀筆記7筆記
- 閱讀筆記03筆記