React-Native 之項(xiàng)目搭建

QQ20160804-7@2x.png

介紹

本來想寫runLoop 最近項(xiàng)目中用到react-native 就這里寫下相關(guān)的東西,總結(jié)一句話,我的react-native 不是學(xué)習(xí)編程,而是踩坑的過程,這里先寫我遇到的問題,作為自己的總結(jié),也為看到文章的各位不再踩這些了(怎么可能)。

問題場景:
因?yàn)轫?xiàng)目功能和需求需要,項(xiàng)目中需要不用上線就能各種通過服務(wù)器變化的功能,這個(gè)時(shí)候reactNative 是個(gè)不錯(cuò)的選擇,畢竟大廠出品,而且國內(nèi)有公司已經(jīng)上線了。比如攜程和jd,有了這些踩坑的先烈,我就想搞一搞吧。

書籍

目前國內(nèi)中文的書籍不是很多,我僅僅買了一本從入門到實(shí)戰(zhàn)。。。。


QQ20160803-0@2x.png

買了大概看了一遍,發(fā)現(xiàn)嘿,國內(nèi)寫的應(yīng)該不錯(cuò)的,可是還是幾乎是在敘述,沒有什么深度,不過初學(xué)時(shí)夠了。里面的代碼是老版本的代碼,生成類的方式都已經(jīng)不一樣了。不過里面的代碼邏輯 還不錯(cuò),都是攜程的員工寫的。找了幾個(gè)同行背書,瞬間感覺自己好陰暗啊。

網(wǎng)絡(luò)學(xué)習(xí)

還是官網(wǎng),這點(diǎn)比較欣慰的是中文的跟進(jìn)比較及時(shí),英文的理解的深度都是靠實(shí)踐出來的,中文還是比較容易看懂的,不過,不全和解釋不夠,這個(gè)和英文的文檔有一樣的毛病
http://reactnative.cn/docs/0.30/getting-started.html#content
上面的論壇不是很活躍,問答的還是
http://stackoverflow.com

另外還有一個(gè)自己總結(jié)的不錯(cuò),我也是深受啟發(fā)
http://react-china.org/t/react-native/3169/3

開始搞起

1 如果你的代碼是cocoapod的代碼,那么你就比較簡單了。
http://www.itdecent.cn/p/5523ec0e93a7
這里面詳細(xì)說明的如何操作,官網(wǎng)上也是比較推薦cocoapod 但是我在cocoapod的時(shí)候等待的時(shí)間就沒有等待到下載完成的時(shí)候,我換了國內(nèi)的源也還是不行,真心不知道怎么辦。
2 如果你的項(xiàng)目是個(gè)老項(xiàng)目,就都是手動(dòng)托進(jìn)去的,那么就要開始挖坑之旅了。在拖拽的時(shí)候,記得項(xiàng)目的位置,要和react-native init 項(xiàng)目名稱,里面的ios 路徑一致

QQ20160804-0@2x.png

開始配置這個(gè)項(xiàng)目,路徑一定要準(zhǔn)確啊

項(xiàng)目拖入到指定目錄下后,開始配置了。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSURL *jsCodeLocation;
    
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"RNT"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    self.view.backgroundColor = [UIColor redColor];
    
    rootView.frame = CGRectMake(0, 0, 320, 480);
    [self.view addSubview:rootView];
    // Do any additional setup after loading the view, typically from a nib.
}

這段代碼還是好好保存,在任意的viewController 里面我們要把 RCTRootView 這個(gè)可以各種變化的view 和他的衍生view 都是以這個(gè)為開始的。

QQ20160804-1@2x.png

這樣然后倒入.a的包,這個(gè)其他文章一堆一堆的

QQ20160804-2@2x.png

這個(gè)一定要配置


這個(gè)包的編譯路徑可以import 也要更改一下 。

QQ20160804-4@2x.png

這個(gè)是可以在你的項(xiàng)目里面自動(dòng)編譯更改過的代碼的腳本。

當(dāng)然,這一切的一切不是重點(diǎn),在我們info.plist 里面要個(gè)要寫的,


QQ20160804-5@2x.png

這個(gè)是你可以localhost 進(jìn)行服務(wù)端訪問的配置。網(wǎng)上大部分都沒有提過這個(gè)地方,我也是被坑的不行不行的

#總結(jié)

項(xiàng)目已經(jīng)導(dǎo)入的react-native 下一篇再寫代碼中的坑,坑死了啊。。。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評論 25 709
  • 簡短說明 收錄一些好用的RN第三方組件,以方便日常的使用,大家有什么推薦的也可以跟我說,我加進(jìn)去。如有冒犯,可以聯(lián)...
    以德扶人閱讀 43,912評論 44 214
  • React Native優(yōu)秀博客,以及優(yōu)秀的Github庫列表(很多英文資料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋閱讀 11,013評論 4 162
  • React的學(xué)習(xí)資源 這個(gè)文章好久沒有更新了,資源算比較老舊的了,畢竟前端更新還是非??斓?。 半年不學(xué)習(xí),都不知道...
    izhongxia閱讀 23,636評論 11 629
  • 我想自由于我而言,是一時(shí)的感覺,而非長久的狀態(tài) 是在細(xì)雨微風(fēng)中慢慢的走 是騎著自行車唱著歌 是坐著公交看風(fēng)景,乘著...
    幾何月閱讀 169評論 0 2

友情鏈接更多精彩內(nèi)容