create-react-app教學 在 コバにゃんチャンネル Youtube 的最佳貼文
「create-react-app教學」的推薦目錄：
- 關於create-react-app教學 在 コバにゃんチャンネル Youtube 的最佳貼文
- 關於create-react-app教學 在 大象中醫 Youtube 的精選貼文
- 關於create-react-app教學 在 大象中醫 Youtube 的最佳解答
- 關於create-react-app教學 在 [教學] 偽react-native app - WebView - 看板Ajax - 批踢踢實業坊 的評價
- 關於create-react-app教學 在 [React學習筆記] 輕鬆使用Create React app - 1010Code 的評價
- 關於create-react-app教學 在 React 開發環境說明 的評價
- 關於create-react-app教學 在 React.js 中文开发入门教学- 建立React 项目工程 - YouTube 的評價
- 關於create-react-app教學 在 [React]建立github上第一個React程式(超詳細) 的評價
- 關於create-react-app教學 在 【心得】【教學】把React作品發布在GitHub上/ 以及常見錯誤 ... 的評價
- 關於create-react-app教學 在 把React.js的專案發佈到Github Page的方法« 冒險與思考 的評價
- 關於create-react-app教學 在 Facebook for Developers 的評價
create-react-app教學 在 [React學習筆記] 輕鬆使用Create React app - 1010Code 的推薦與評價
在clone 之前先確保你的電腦已安裝或更新Node.js， 新的版本不需安裝全域指令。如果先前電腦有安裝 npm install -g create-react-app 的讀者建議使用前先 ... ... <看更多>
create-react-app教學 在 React 開發環境說明 的推薦與評價
開啟「命令提示字元」視窗(Windows) 或Terminal 應用程式(Mac OS X)，並執行以下指令安裝npm 套件(這個動作會執行1 ~ 3 分鐘)： npm install -g create-react-app. ... <看更多>
create-react-app教學 在 [教學] 偽react-native app - WebView - 看板Ajax - 批踢踢實業坊 的推薦與評價
最近在學react跟react-native發現：
react可以用來寫web apps。
react-native可以用來寫Android、iOS、甚至Win 10 apps。
但兩者的UI components是不能直接交換使用的囧
這樣好像就不能寫一次JS code，直接輸出三種apps: web, Android, iOS。
後來發現react-native有提供WebView component，
它相當於在app內建一個瀏覽器，可以讀取HTML, CSS, JS，
就可以用來讀取react web app bundle!
不過還是強調，
WebView這種作法並不像是使用react-native UI components有native的效能，
我稱之"偽"react-native apps。
它的好處是可以偷懶：寫好一個react web app，
不用改寫UI成為react-native UI，就能轉換成Android, iOS apps。
或許對轉換一些小web apps還頗實用。用途請自行取捨。
以下步驟在教如何把react web app轉成偽react-native apps:
(在此假設你的OS是Linux、
react-native Android開發環境已照Ref. [1]建立)
# 安裝react與react-native apps生成工具:
npm install -g create-react-app react-native
# 建立react app:
create-react-app myapp
cd myapp
# 修改bundle裡URLs的啟始路徑[2]，加入下面這行至package.json:
"homepage": "."
# 此步可考慮執行npm start驗證你的web app是否正常。
# 產生bundle:
npm run build
# 會輸出到build資料夾。
cd ..
# 建立react-native app:
react-native init AwesomeProject
cd AwesomeProject
# 產生assets資料夾:
mkdir -p android/app/src/main/assets
# react-native會把assets資料夾的檔案一並包入bundle。
# 把react的bundle所在資料夾build，連結到assets底下:
cd ..
ln -s myapp/build AwesomeProject/android/app/src/main/assets
cd AwesomeProject
# 修改index.android.js的render，使用WebView讀build/index.html:
<View>
<WebView style={{ backgroundColor: "blue", height: 200 }}
source={{uri: 'file:///android_asset/build/index.html'}}
scalesPageToFit={true} />
</View>
# 參照assets的uri要以"file:///android_asset"開頭[3]。
# 啟動Android emulator:
android avd
# 執行react-native app:
react-native run-android
# 觀查emulator有沒有啟動Android app，畫面應該跟web app一樣。
Refs:
[1]
https://facebook.github.io/react-native/docs/getting-started.html#content
[2]
https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/
[3] https://github.com/facebook/react-native/issues/505
--
楞嚴咒(附注音)：
https://1drv.ms/1c0YbNt
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.115.73.148
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1472559745.A.991.html
... <看更多>