一臉懵逼：吐槽前言
后面慢慢吐槽
感謝前人分享經(jīng)驗系列 ：React-Native 資料
iOS 和 Android 開發(fā)的 React Native 入門指南
iOSer邁向前端一小步--OC/Swift與RN混編Demo (這里面有OC\RN混編的項目搭建Demo)
（后面如有用到有用的繼續(xù)補充）
環(huán)境配置與項目搭建
iOS中 RN與OC項目混編 （兩個關(guān)鍵文件配置）
- package.json
- Podfile
package.json
{
"name": "RNProjectName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2"
}
}
name 項目名稱
version 版本（遵守‘大版本.次要版本.小版本’的格式）
// 終端中
? app-iv3 git:(dev_2.7.2_Dombo_RN) ? ls
INTERNATIONAL_README laoyuegou package-lock.json
README node_modules package.json
? app-iv3 git:(dev_2.7.2_Dombo_RN) ? npm install
cd 到 package.json 所在的文件目錄下
npm install
安裝完成后會有一個 node_modules 文件夾
Podfile
# ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ======
pod 'React', :path => ‘../node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
]
# 根據(jù)需求添加項目中需要的模塊
# path 這里要正確設(shè)置 node_modules/react-native 的所在路徑吸重，每個人不一樣
配置完后歪今，pod install 即可安裝 React-Native 所以來的相關(guān)組件庫
React-Native 咋用呢
// 倒入頭文件
#import <React/RCTRootView.h>
//
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// 傳給RN的參數(shù)必須是字典類型嚎幸，要和js代碼propertis一致
NSDictionary *params = @{@"scores" : @[
@{@"name" : @"Alex",
@"value": @"42"},
@{@"name" : @"Joel",
@"value": @"10"}
]
};
// moduleName 要對應(yīng)index.ios.js 上的 AppRegistry module
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNTestViewModule"
initialProperties : params
launchOptions : nil];
// 去掉返回箭頭的title
UIBarButtonItem *item = [[UIBarButtonItem alloc] init];
item.title = @"";
self.navigationItem.backBarButtonItem = item;
UIViewController *viewController = [UIViewController new];
viewController.view = rootView;
viewController.title = @"承載RN視圖的VC";
[self.navigationController pushViewController:viewController animated:YES];
React-Native 0.45.0 以上版本需要下載boost等幾個第三方庫編譯（是需要終端fan qiang的寄猩，否則超時失敗）
- package.json
- Podfile
package.json
{
"name": "RNProjectName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0"
}
}
Podfile.json
# Uncomment the next line to define a global platform for your project
react_native_path = './Extern/ReactNative/node_modules/react-native'
platform :ios, '9.0'
inhibit_all_warnings!
target 'RNProject' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實際路徑修改下面的`:path`
pod 'React', :path => react_native_path, :subspecs => [
'Core',
#'BatchedBridge', # 0.45 版本以后需要添加
'CxxBridge',
'DevSupport', # 如果RN版本 >= 0.43替废，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0，則加入下面這行
pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
# Third party deps
pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => react_native_path + '/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end
剩下步驟跟part1 中的一樣不再描述
運行
終端cd 到 package.json 文件下
如果是adb斷了就使用一下步驟
- adb reverse tcp:8081 tcp:8081
- npm start
如果adb沒斷,直接 - npm start
RN報錯與解決方案：
1椎镣、Argument list too long: recursive header expansion failed at
解決：查到的一些方法太好使，'node_modules'目錄一般放于根目錄中衣陶，不要放太深層的路徑即可
2018-7-24更新，后續(xù)再補
IDE：Visual Studio Code
