開發(fā)環(huán)境的配置
1. 安裝node.js & package.json(依賴及版本配置文件)
2. react 0.47.2
3. podfile
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47則加入此行
'DevSupport', # 如果RN版本 >= 0.43挪圾，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTSettings',
]
# 如果你的RN版本 >= 0.42.0扯躺，則加入下面這行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
4. RCTRootView
RN在native頁面的展現(xiàn)主要通過RCTRootView御蒲。示例代碼（加載bundle包）：
NSURL *jsCodeLocation;
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"bundle"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"app"
initialProperties:
nil launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
5. 打包
RN項目可以打成一個bundle包歪沃，供他人使用贺奠，但是不含資源文件
整體思路
項目思路
- 安裝node.js
- 根據(jù)package.json npm start
- 調(diào)整項目結(jié)構(gòu)
- pod install
設(shè)計思路
1. 熱更新：
- RN開發(fā)后資源用相對路徑剪芍，打bundle后一起壓縮zip病苗，傳至后臺
- 客戶端請求接口惩嘉，根據(jù)項目ID浪耘，第一次請求或者版本號不相符乱灵，下載zip，解壓至Cache文件夾七冲。根據(jù)ID創(chuàng)建路徑
- 進入RN頁面前痛倚，如果不需要更新，直接找到bundle進入澜躺，如果需要更新蝉稳，下載替換
- 發(fā)生錯誤，刪除相應(yīng)路徑下文件掘鄙，重新下載耘戚。
2. 增量
3. 預(yù)加載
問題點
1. 安裝低版本的react，package里配置
2. 提示為register操漠，index入口名配置問題
3. 本地運行RN代碼收津，需要啟動npm，且http請求設(shè)置為允許
啟動npm后可以動態(tài)調(diào)試
4. react本地運行版本與bundle版本要保持一致
高了或者低了都不行
5. RN調(diào)用原生 Native類名
· push 需要獲取 Appdelegate導(dǎo)航控制器
· push or pop 要在main_queue中執(zhí)行浊伙，否則可能會失效
· 回調(diào)用RCTPromiseResolveBlock/RCTPromiseRejectBlock（官方的另一種方式不知道為何失效撞秋，待核查）
6. Native向RN傳參
如果用initialProperties，RN頁面內(nèi)如果采用navigation或者多級頁面吧黄，一定要逐層將props傳遞部服，傳遞后直接取出this.props.xxx
