iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
2
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 3

如何新增一個 React Native 專案

還沒有把 React Native 環境建置起來的朋友,可以參考這篇 React Native 環境建置 再繼續閱讀這篇喔

新增專案

react-native init HelloReactNative
HelloReactNative 是專案名稱,這樣就完成了很簡單吧!!
然後先開啟 genymotion 的虛擬機
有用過 Node.js 的朋友接下來一定不陌生,就是萬用的 npm start

cd HelloReactNative
npm start
react-native run-android

Mac 的朋友並且有裝 Xcode 的
可以使用

react-native run-ios

這樣就完成了 React Native 第一個 Hello World 了
你就可以在你的虛擬機看到

http://ithelp.ithome.com.tw/upload/images/20161218/20103341BarlavQH4y.png

http://ithelp.ithome.com.tw/upload/images/20161218/2010334191QcOkbzYi.png

完成到這裡後可以開始在

.
├── __tests__
├── android
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
├── npm-debug.log
└── package.json

index.android.js、index.ios.js 裡面改改 裡面的字先玩玩看喔
下一章節會介紹一些模擬器和 React Natvie Debug 環境

如果 npm start 時出現了 Packager can't listen on port 8081 錯誤訊息
http://ithelp.ithome.com.tw/upload/images/20161218/201033416yOEwl3iXY.png
代表你跑了兩次 npm start,所以他的 bundle server port 衝突,無法開起來
只要關掉其中一個或是照他的指令
lsof -n -i4TCP:8081
http://ithelp.ithome.com.tw/upload/images/20161218/20103341FfqSTknx57.png
找到要 kill 的 PID 就可以了

kill -9 <PID>

有問題依然可以來 React Native Taiwan 問問喔
創科資訊


上一篇
React Native 環境建置
下一篇
React Native 工欲善其事,必先利其器 開發小撇步
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言