React Native學習筆記之–向原生應用中整合RN頁面

根據在官方文件的學習要向已有的原生專案中新增RN元件最重要的就是以下幾步：

1.Understand what React Native components you want to integrate.
2.Create a Podfile with subspecs for all the React Native components you will need for your integration.
3.Create your actual React Native components in JavaScript.
4.Add a new event handler that creates a RCTRootView that points to your React Native component and its AppRegistry name that you defined in index.ios.js.
5.Start the React Native server and run your native application.
6.Optionally add more React Native components.

下面就一步一步的向原生專案中整合RN元件：

1、官方說整合RN需要package.json和index.ios.js兩個檔案，Xcode建立的工程是沒有的，這裡我是從一個空的RN專案中拷貝過來的,然後將package.json中的name修改為自己需要的。專案目錄結構也是照著原始建立的。

2、進入package.json所在的目錄，利用npm匯入React Native需要的包資源,執行npm install

出現如上圖所示表示資源包匯入成功，並且可以檢視該目錄下有一個node_modules目錄。
3、建立Podfile檔案，利用CocoaPods匯入需要使用的RN元件

到這裡表示RN的環境已經整合到原生的專案工程中了。

4、在原生介面跳轉到RN介面中
這裡我通過觸發StoryBoard中按鈕跳轉到RN介面，部分程式碼如下（官方文件也給出了比較詳細的介紹）：

@IBAction func jumpRNPage(_ sender: UIButton) {
        let jsCodeLocation = NSURL.init(string: "http://localhost:8081/index.ios.bundle?platform=ios")
        let rootView = RCTRootView.init(bundleURL: jsCodeLocation as
 
 URL!, moduleName: "RNDemoComponent", initialProperties: nil, launchOptions: nil)
        let rnPageVc = UIViewController()
        rnPageVc.view = rootView
        navigationController?.pushViewController(rnPageVc, animated: true)
    }

在專案中還需要對http做配置，否則會出現連線不到服務的錯誤，要想執行專案還需要在控制檯進入專案的根目錄執行react-native start來啟動服務。

demo演示：