iOS接入react-native

最為一個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)在依賴

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市当宴,隨后出現(xiàn)的幾起案子畜吊,更是在濱河造成了極大的恐慌,老刑警劉巖户矢,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玲献,死亡現(xiàn)場離奇詭異,居然都是意外死亡梯浪,警方通過查閱死者的電腦和手機捌年,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挂洛,“玉大人礼预,你說我怎么就攤上這事÷簿ⅲ” “怎么了托酸?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長伙单。 經(jīng)常有香客問我获高,道長哈肖,這世上最難降的妖魔是什么吻育? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮淤井,結(jié)果婚禮上布疼,老公的妹妹穿的比我還像新娘。我一直安慰自己币狠,他們只是感情好游两,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著漩绵,像睡著了一般贱案。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上止吐,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天宝踪,我揣著相機與錄音,去河邊找鬼碍扔。 笑死瘩燥,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的不同。 我是一名探鬼主播厉膀,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼溶耘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了服鹅?” 一聲冷哼從身側(cè)響起凳兵,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎企软,沒想到半個月后留荔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡澜倦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年聚蝶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藻治。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡碘勉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桩卵,到底是詐尸還是另有隱情验靡,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布雏节,位于F島的核電站胜嗓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏钩乍。R本人自食惡果不足惜辞州,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寥粹。 院中可真熱鬧变过,春花似錦、人聲如沸涝涤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阔拳。三九已至崭孤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間糊肠,已是汗流浹背辨宠。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留罪针,地道東北人彭羹。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像泪酱,于是被迫代替她去往敵國和親派殷。 傳聞我的和親對象是個殘疾皇子还最,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容