最為一個iOS開發(fā)人員蒲障,最近在研究rn開發(fā)幌氮,坑還挺多的。下面我就來說說iOS接入rn的步驟以及我遇到的問題.
前提:電腦已經(jīng)安裝過React-Native相關(guān)環(huán)境;
創(chuàng)建:首先我們創(chuàng)建一個iOS項目,我命名為React-IOS丑蛤;
1.首先創(chuàng)建一個iOS項目? ??
?這個相信大家都會創(chuàng)建录平,就不說了麻车。
2.在項目目錄下創(chuàng)建一個reactnative文件夾
3.在該目錄下創(chuàng)建package.json和index.js文件,內(nèi)容如下
4.cd到reactnative目錄下npm install 下載node_model依賴
5.pod里面加入rn的庫
platform :ios, ‘9.0’
target 'React-IOS' do
? pod'yoga', :path => './reactnative/node_modules/react-native/ReactCommon/yoga'
? pod'React', :path => './reactnative/node_modules/react-native', :subspecs => [
? ? 'Core',
? ? 'RCTImage',
? ? 'RCTNetwork',
? ? 'RCTText',
? ? 'RCTWebSocket',
? ? 'CxxBridge', # 如果RN版本 >= 0.45則加入此行
? ? 'DevSupport', # 如果RN版本 >= 0.43斗这,則需要加入此行才能開啟開發(fā)者菜單
? ? #'BatchedBridge',
?? ? # 添加你的項目中需要的其他三方庫
? ]
? # 如果RN版本 >= 0.45則加入下面三個第三方編譯依賴
? pod'DoubleConversion', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
? pod'glog', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/glog.podspec'
? pod'Folly', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/Folly.podspec'
end
我們只需要把紅色換成自己第四步創(chuàng)建的那個文件夾的名字
6.cd到iOS項目目錄下动猬,pod install
7.iOS里面的代碼
NSURL*jsCodeLocation = [NSURL
?? ? ? ? ? ? ? ? ? ? ? ? ? ? URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
? ? RCTRootView*rootView =
? ? [[RCTRootViewalloc]initWithBundleURL: jsCodeLocation
?? ? ? ? ? ? ? ? ? ? ? ? moduleName? ? ? ? :@"ReactIOS"
?? ? ? ? ? ? ? ? ? ? ? ? initialProperties:
?? ? @{
?? ? ? @"scores":@[
?? ? ? ? ? ? ? @{
?? ? ? ? ? ? ? ? ? @"name":@"Alex",
?? ? ? ? ? ? ? ? ? @"value":@"42"
?? ? ? ? ? ? ? ? ? },
?? ? ? ? ? ? ? @{
?? ? ? ? ? ? ? ? ? @"name":@"Joel",
?? ? ? ? ? ? ? ? ? @"value":@"10"
?? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ]
?? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? launchOptions? ? :nil];
? ? self.view= rootView;
8?手動集成react-native添加react-native工程文件由于項目沒有使用Cocoapods進(jìn)行第三方依賴包管理,所有我們需要手動將react-native工程包添加到我們的原生ios工程中表箭。打開reactnative/node_modules/react-native目錄赁咙,找到相關(guān)的項目包,將React相關(guān)的工程包手動添加到項目中:
?添加`react-native/React/React.xcodeproj`到項目中?
添加`react-native/Libraries/Network/RCTNetwork.xcodeproj`到項目中
?添加`react-native/Libraries/Text/RCTText.xcodeproj`到項目中?
添加`react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj`到項目中?
添加`react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj`到項目中?
添加的原則是免钻,你需要什么就添加什么工程包彼水。好了,我們已經(jīng)將React相關(guān)工程包手動添加到React-iOS工程項目的reactnative目錄下极舔。添加相關(guān)frameworks文件接下來要將相關(guān)的frameworks文件添加到工程中凤覆,React-iOS -> TARGETS -> React-iOS -> Build Phases -> Link Binary Width Libraries添加
?將所有.a文件選中并添加添加
?添加搜索頭文件的地址React-iOS -> TARGETS -> React-iOS -> Build Settings -> Header Search Paths,添加一條$(SRCROOT)/reactnative/node_modules/react-native/React拆魏,選擇recursive盯桦。這樣我們就react-native集成到現(xiàn)有的ios工程中了。
9.運行iOS項目commod+r之前渤刃,先在終端cd到創(chuàng)建的reactnative文件夾下拥峦,然后npm start,啟動服務(wù)器溪掀,
最后運行iOS項目事镣。這個地方和rn創(chuàng)建的項目運行iOS不一樣玖绿,需要先開啟服務(wù)器惑折,rn是創(chuàng)建的iOS工程運行的時候會自動開啟服務(wù)器
10.運行結(jié)果
說說我遇到的問題吧,首先我在第五步遇到的問題?
當(dāng)時紅色部分沒有加产艾,一直報錯喊递,找了好幾天才看到別人有一篇文章是說的這個問題随闪,要把紅色部分加上。上面問題解決后我又遇到一個問題骚勘,錯誤在第三步和第七步铐伴,
這三個紅色地方不對應(yīng),導(dǎo)致不錯
解決辦法就是把-去掉就好了撮奏。
希望能幫到大家!!!!!!
項目地址:https://github.com/shamworld/RN-IOS,先cd到reactnative下 npm install ,在cd到項目目錄下pod install 現(xiàn)在依賴