[教學] 製作偽react-native app - WebView

看板Ajax作者zxvc (眾生都是未來佛)時間8年前 (2016/08/30 20:22)推噓1(1推 0噓 8→)

留言9則, 5人參與討論串1/1

最近在學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 -- 楞嚴咒(附注音)： http://1drv.ms/1c0YbNt -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.115.73.148 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1472559745.A.991.html