RN學習（四）——RN專案整合到現有iOS專案中

小小甜發表於2019-05-12
iOS

  通過前面三篇的探索，我大概瞭解了CodePush可實現的效果。本篇是記錄總結怎麼把RN的專案整合到現有的專案中來。

一、新建package.json

1.如果是新匯入的RN.則建立如下內容到package.json中。name是專案名字。RN可指定版本號。

RN學習（四）——RN專案整合到現有iOS專案中

2.我是將我之前RNTest的RN專案中的json檔案複製了過來

二、安裝RN依賴庫

進入package.json所在的檔案目錄下，執行如下命令。

npm install
複製程式碼

安裝後，資料夾裡面會多出node_modules。

RN學習（四）——RN專案整合到現有iOS專案中

三、新增RN依賴庫到Podfile檔案中

1.如果是新匯入的RN,也就是隻依賴了RN(0.59.5)的話，將以下匯入到Podfile中。

# React Native requirements
pod 'React', :path => './node_modules/react-native', :subspecs => [
   'Core',
   'CxxBridge', # Include this for RN >= 0.47
   'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
   'RCTText',
   'RCTNetwork',
   'RCTWebSocket', # Needed for debugging
   'RCTAnimation', # Needed for FlatList and animations running on native UI thread
   # Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => './node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'
複製程式碼

2.如果已經有自己的RN專案的話，將裡面ios裡面的Podfile裡面的複製過來即可。

3.pod install。

四、新增RN檔案。

1.建立index.js。注意下面紅框裡面的是在iOS程式碼裡面，建立RNView的時候會用到的。

RN學習（四）——RN專案整合到現有iOS專案中

2.如果是已寫了一部分的RN專案，則將裡面的檔案複製過來

RN學習（四）——RN專案整合到現有iOS專案中

3.我是將檔案移到iOS專案中（通過1或者2來移到專案中），然後打包。

react-native bundle --entry-file App.js --bundle-output main.jsbundle --platform ios --assets-dest ./bundle --dev false
複製程式碼

五、執行Xcode。

1.引入標頭檔案。

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTBridgeDelegate.h>
複製程式碼

RN學習（四）——RN專案整合到現有iOS專案中

2.新增RNView

注意moduleName和RN中的保持一致。

- (void)addRNView {
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:@"PersonPage"
                                              initialProperties:nil];
    
    rootView.backgroundColor = [UIColor redColor];
    rootView.frame = CGRectMake(0, 0, SCREENW, SCREENH - kTabarHeight);
    [self.view addSubview:rootView];
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
    return [NSURL URLWithString:@"http://192.168.2.113:8081/index.bundle?platform=ios&dev=true"];
}
複製程式碼

RN學習（四）——RN專案整合到現有iOS專案中

3、執行專案。檢視效果。

疑問&請教

  我也是在入門的路上，如果上面有不對的，歡迎大神指點哦~

另外，我很好奇，難道大家都是這樣複製，然後打包，讓iOS跑起來的嗎？感覺這樣還挺麻煩的。

下篇記錄

之後我就開始搭介面了。簡單的介面還比較好搭，大家看看我的成果(以我們專案的個人中心頁面練手的)~~~跟小程式很像。佈局是yoga佈局，我到現在有些還是需要試幾次才能出來效果。。

RN學習（四）——RN專案整合到現有iOS專案中

上面的佈局控制元件什麼的，看官網或者用到什麼去網上查一下~目前是在研究自定義下拉重新整理~ 下篇寫RN與iOS互動~~~

相關文章