作者zxvc (众生都是未来佛)
看板Ajax
标题[教学] 伪react-native app - WebView
时间Tue Aug 30 20:22:18 2016
最近在学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://webptt.com/cn.aspx?n=bbs/Ajax/M.1472559745.A.991.html
1F：→ GoalBased: 看了前半段..就是webview的意思吗..? 08/30 23:39
2F：→ wuboy: 就是webview而已 只是不想学其他语言时偷懒的做法... 08/31 01:38
3F：→ zxvc: w大，应该说"不想学其它react-native APIs或"不想重写UIs"比 08/31 07:04
4F：→ zxvc: 较正确一点。react-native APIs本身也是react components， 08/31 07:05
5F：→ zxvc: 也是用JSX/JS语言去写的。 08/31 07:06
6F：→ zxvc: G大，是用WebView。但这bundle的步骤还颇不直觉的，如[2][3] 08/31 07:13
※ 编辑: zxvc (140.115.73.148), 08/31/2016 07:15:43
7F：推 Qiqi: 直接用ionic实际 08/31 08:11
8F：→ travelerX: React 家族的价值在一种技术，各平台可用。而非一次开 09/01 18:21
9F：→ travelerX: 发，各平台都用 09/01 18:21