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

Yanwei Liu

·

Follow

4 min read

·

Jun 3, 2019

--

Share

使用開發好的元件

純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.