iOS React Native 混合開發整合React Native

序：

   有時候我們並不是需要全部使用React Native,我們想和原生混合開發，那我們應該怎麼辦呢。

先看一下我整合完之後的專案目錄：

首先安裝React Native node元件

       1、新建一個資料夾如目錄中的RN，這個資料夾用於存放React Native相關內容

       2、新建一個package.json用於安裝node_modules。package.json內容如下：

      

{
"name": "RNHybrid",   //記得修改專案的名字
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}

       3、cd 你的專案路徑，然後執行 nmp install。如下圖：

  執行完上面的命令之後，開啟你的專案目錄下，你就會發現node_modules都下載到你新建的資料夾中了，如圖：

         4、在新建的目錄下新建index.ios.js,把之前React Native的例子拷過來就可以，記得改下modules的名字

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class RNHybrid extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          iOS 原生 RN混合開發!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

Cocospod安裝React Native

既然大家都來看RN了。cocospod就不用講了吧。

1、podfile我們要加入的內容

路徑填寫你存放node_modules的路徑即可。

pod 'Yoga',  :path => ‘./RN/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [
 'Core',
 'RCTText',
 'RCTNetwork’,
 'RCTWebSocket', 
]

因為Core依賴於Yoga所以要新增一下，至於專案中需要什麼元件以後可以在subspecs依次新增。

2、然後pod install就行了，比較慢，你可以擼一把了。

3、成功之後，我們來用一下吧，我們可以在原生專案中加入RN介面試試。

 NSURL *jsCodeLocation;

    jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

    RCTRootView *rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

                                                        moduleName:@"RNHybrid"

                                                 initialProperties:nil

                                                     launchOptions:nil];

    rootView.frame =CGRectMake(0,0,[UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height);

    [self.viewaddSubview:rootView];

下面程式碼大家有疑惑的估計就是這個url從哪來的，下面當你啟動的時候，會告訴你。

4、啟動RN

      cd 到你上面新建的資料夾裡，如我專案中的RN資料夾，然後執行react-native start

     這時候，你可以看出來，伺服器啟動的埠是8081,也就知道了上面那個url

5、這時候你啟動的時候如果看到下面的畫面：

修改ATS就可以了，會iOS的基本都會，不囉嗦了。

6、在執行下試試吧，結果如圖：