iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Mobile Development

卡卡30天學 React Native系列 第 3

[ 卡卡 DAY 3 ] - React Native 環境建立輕鬆上手

React Native 我的安裝步驟:

  1. Node.js,我使用 Homebrew 來安裝,所以會先安裝 Homebrew!再來安裝 Node.js
    Node.js 是用來 build JavaScript 程式。
brew install node
  1. watchman
    Watchman 是用來偵測程式碼的變化,以方便重新 build。
brew install watchman
  1. Android Studio
  2. Xcode 可以使用 APP STORE 也可以在網站下載, 只有mac可以安裝!
  3. 任何一個IDE,我使用的是 VSCode
  4. React Native CLI
    安裝在全域,若無法執行需加上 sudo
npm install -g react-native-cli

於指定資料夾下指令

react-native init <<專案名稱>>

進入<<專案名稱>>資料夾

cd <<專案名稱>>

起專案

npm run ios
//若要指定裝置 --simulator="裝置名"
react-native run-ios --simulator="iPhone 12"

也或著可以使用 Xcode 開時<<專案名稱>>/ios/<<專案名稱>>.xcodeproj
https://ithelp.ithome.com.tw/upload/images/20210917/2014201196UlYNg9cr.png
按下去跑起來

專案環境安裝完成

https://ithelp.ithome.com.tw/upload/images/20210917/20142011QNgnIkLqjh.png

simulator 模擬器介紹

iOS 模擬器於每次檔案有更動時 app 就會自動重新載入,不用我們手動按 Command + R(重新整理),但如果當機可以按一下 XD。
Command + D 是打開 developer menu,但如果沒反應,請按 Shift + Command + K ,再嘗試一次 Command + D。

比較常使用的就是以下這三個
reload - 重新整裡
debug with chrome
Inspector - 打開style檢視功能及network

https://ithelp.ithome.com.tw/upload/images/20210917/20142011OUSrUnpPqC.png


上一篇
[ 卡卡 DAY 2 ] - React Native 是什麼? 原理?優點?
下一篇
[ 卡卡 DAY 4 ] - React Native 專案結構
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Sonic
iT邦新手 5 級 ‧ 2022-04-06 10:29:06

請問為何不使用expo-cli?

我要留言

立即登入留言