RN學習（四）——RN項目集成到現有iOS項目中

  經過前面三篇的探索，我大概瞭解了CodePush可實現的效果。本篇是記錄總結怎麼把RN的項目集成到現有的項目中來。

1、新建package.json

1.若是是新導入的RN.則建立以下內容到package.json中。name是項目名字。RN可指定版本號。

2.我是將我以前RNTest的RN項目中的json文件複製了過來

2、安裝RN依賴庫

進入package.json所在的文件目錄下，執行以下命令。

npm install
複製代碼

安裝後，文件夾裏面會多出node_modules。

3、添加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。

4、添加RN文件。

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

2.若是是已寫了一部分的RN項目，則將裏面的文件複製過來

3.我是將文件移到iOS項目中（經過1或者2來移到項目中），而後打包。

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

5、運行Xcode。

1.引入頭文件。

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

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"];
}
複製代碼

三、運行項目。查看效果。

疑問&請教

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

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

下篇記錄

以後我就開始搭界面了。簡單的界面還比較好搭，你們看看個人成果(以咱們項目的我的中心頁面練手的)~~~代碼感受跟小程序很像。佈局是yoga佈局，我到如今有些仍是須要試幾回才能出來效果。。

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