React Native 跨平台APP開發學習筆記(四):使用開發好的元件&除錯&升級RN版本&APP商店上架&遠端更新APP&換Icon& React Native 好用套件分享

使用開發好的元件

純JS開發的元件

// 1.npm i <library name> --save
npm i react-native-app-intro --save
// 2.直接引入
import AppIntro from 'react-native-app-intro';

使用原生語言開發的元件

// 1.npm i <library name> --save
npm i react-native-vector-icons --save
// 2.使用link連結
react-native link react-native-vector-icons
// 3.引入
import Icon from 'react-native-vector-icons/FontAwesome';
<View style={{ flex: 1, paddingTop: 20}}>
<Icon name="rocket" size={30} color="#900" />
</View>

除錯

Log

react-native log-ios
react-native log-android

錯誤畫面

console.error('Error!!!');

Reload

點擊"R"鍵兩下,重新載入APP

升級

安裝react-native-git-upgrade

npm install -g react-native-git-upgrade

直接更新到最新版本

react-native-git-upgrade

更新到版本 X.Y.Z

react-native-git-upgrade X.Y.Z

APP商店上架

iOS 上架

https://ithelp.ithome.com.tw/articles/10188931https://ithelp.ithome.com.tw/articles/10188858

Android 上架

https://ithelp.ithome.com.tw/articles/10188983

遠端更新APP

Code Push

https://ithelp.ithome.com.tw/articles/10188909https://ithelp.ithome.com.tw/articles/10188974

換ICON

製作APP ICON

https://makeappicon.com/

Android

Android Asset Studio 能快速把 Android 的 ICON 裁切好,上傳完圖片,選好一些配置就能下載,下載完成並解壓縮後,開啟 ${專案名稱}/android/app/src/main/res/ 路徑,直接覆蓋後就可以把所有尺寸的 icon 都替換完成摟。

iOS

http://appiconmaker.co/Home/Index/25724fe4-94a4-475b-9877-0782299d9e2e 上傳完成並下載後,開啟 ${專案名稱}/ios/${專案名稱}.xcodeproj 會看到一個 Images.xcassets 有默認的6張圖片需要填充,然後把對應的大小放進去。這裡的29pt上面有2x就代表是5858px,3x就代表是8787px,40pt和60pt上面雷同。如果尺寸弄錯,會有錯誤提示。

React Native 套件分享

https://ithelp.ithome.com.tw/articles/10189009Awesome React NativeReact-Native-AppsReact Native Libraries you should know.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store