摘要：交流群也定期更新最新的學(xué)習(xí)資料給大家，謝謝大家支持小伙伴們掃下方二維碼加入技術(shù)交流群

做過原生iOS開發(fā)或者Android開發(fā)的同學(xué)們肯定也都了解Hybrid，有一些Hybrid的開發(fā)經(jīng)驗(yàn)，目前我們企業(yè)開發(fā)中運(yùn)用最廣泛的Hybrid App技術(shù)就是原生與H5 hybrid，在早期的時(shí)候，可能部分同學(xué)也接觸過PhoneGap等hybrid技術(shù)，今天我們就簡單來聊下一種比較新的Hybrid技術(shù)方案，原生App與ReactNativie Hybrid，如果有同學(xué)們對(duì)React Native技術(shù)不熟悉的同學(xué)，可以查看作者簡書中對(duì)React Native基礎(chǔ)的講解：React Native入門到實(shí)戰(zhàn)講解

初級(jí)Demo示例

高級(jí)Demo示例

創(chuàng)建一個(gè)iOS原生項(xiàng)目

將iOS原生項(xiàng)目支持pod

調(diào)整目前項(xiàng)目工程的文件夾結(jié)構(gòu)

添加RN依賴相關(guān)文件

安裝React Native

修改Podfile文件，原生安裝React Native依賴庫

在iOS原生頁面填加RN頁面入口

修改RN入口文件 index.ios.js

執(zhí)行npm start 運(yùn)行項(xiàng)目

使用Xcode創(chuàng)建一個(gè)空的項(xiàng)目，這個(gè)應(yīng)該不用多說了

這一操作步驟同樣也很簡單，我們只需要執(zhí)行下面的幾條命令即可，如果對(duì)cocoapods 安裝使用不熟悉的同學(xué)請(qǐng)參照作者簡書

創(chuàng)建podfile文件，我們?cè)谟衳codeproj文件的同級(jí)目錄下執(zhí)行下面命令，這時(shí)我們的項(xiàng)目文件中就多了一個(gè)Podfile文件

$ pod init

執(zhí)行pod install 命令來安裝pod，同樣，這個(gè)命令也是在有xcodeproj同級(jí)目錄下，安裝完成后，我們的項(xiàng)目多了一個(gè)

$ pod install

注意： 這里對(duì)原生iOS不熟悉的同學(xué)們需要注意了，當(dāng)我們使用pod來作為庫管理工具，后面我們打開項(xiàng)目運(yùn)行，我們就需要打開上圖所示的xcworkspace文件了

這里對(duì)文件夾做結(jié)構(gòu)調(diào)整是為了后期更好的將Android原始項(xiàng)目也使用RN Hybrid，使iOS和Android共享一份React Native框架，共享同一份JS文件，調(diào)整的后的文件夾結(jié)構(gòu)如下

到這里，我們?cè)膇OS項(xiàng)目目錄結(jié)構(gòu)已近調(diào)整完畢，后面我們需要處理的都是RN相關(guān)的內(nèi)容了，這里需要?jiǎng)?chuàng)建的文件有點(diǎn)多，大家可以直接將示例Demo中的這幾個(gè)文件直接拖到自己的項(xiàng)目中，然后在做修改即可

首先我們需要?jiǎng)?chuàng)建package.json文件

創(chuàng)建index.ios.js文件

創(chuàng)建index.android.js文件

創(chuàng)建bundle文件夾，注意這個(gè)文件夾是后面我們接入CodePush熱更新時(shí)使用的

安裝React Native這個(gè)也很簡單，我們也是簡單的執(zhí)行下面的命令即可，注意：執(zhí)行npm 系列的命令，我們都需要在項(xiàng)目根目錄（有package.json文件的目錄）下執(zhí)行

$ npm install

package.json文件內(nèi)容如下

{
  "name": "iOSHybridRNDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "prop-types": "^15.6.1",
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-native-code-push": "^5.2.2",
    "react-native-root-toast": "^1.3.0",
    "react-native-router-flux": "^4.0.0-beta.24",
    "react-native-simple-store": "^1.3.0",
    "react-native-storage": "^0.2.2",
    "react-native-vector-icons": "^4.3.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

注意：因?yàn)槲覀冺?xiàng)目中使用到了react-native-vector-icons 這個(gè)iconFont組件需要依賴原生，所以我們執(zhí)行完 npm install 之后，我們還需要 再執(zhí)行一個(gè) react-native link react-native-vector-icons 命令來安裝原生依賴

$ react-native link react-native-vector-icons

當(dāng)我們執(zhí)行完npm install 命令之后，我們?cè)俅蜷_項(xiàng)目目錄，發(fā)現(xiàn)多了一個(gè) node_modules 文件夾，這個(gè)文件夾就是我們安裝的React Native所有的依賴庫

后面我們都是使用Pod來管理原生的依賴庫，安裝React Native依賴庫，我們只需要將下面的Podfile文件中的內(nèi)容添加進(jìn)去，執(zhí)行 pod install 安裝即可

Podfile文件

# Uncomment the next line to define a global platform for your project
  platform :ios, "9.0"
# Uncomment the next line if you"re using Swift or would like to use dynamic frameworks
# use_frameworks!

target "iOSHybridRNDemo" do
  
  # Pods for iOSHybridRNDemo

    #***********************************************************************#
   
    # "node_modules"目錄一般位于根目錄中
    # 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
    pod "React", :path => "../node_modules/react-native", :subspecs => [
    "Core",
    "RCTText",
    "RCTImage",
    "RCTActionSheet",
    "RCTGeolocation",
    "RCTNetwork",
    "RCTSettings",
    "RCTVibration",
    "BatchedBridge",
    "RCTWebSocket",
    "ART",
    "RCTAnimation",
    "RCTBlob",
    "RCTCameraRoll",
    "RCTPushNotification",
    "RCTLinkingIOS",
    "DevSupport"
    # 在這里繼續(xù)添加你所需要的模塊
    ]

    # 如果你的RN版本 >= 0.42.0，請(qǐng)加入下面這行
    pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
    
    #***********************************************************************#

    pod "RNVectorIcons", :path => "../node_modules/react-native-vector-icons"

end

注意： #*************************# 中間的內(nèi)容是我們需要添加的RN依賴庫，后面我們所有pod 相關(guān)的命令，我們都需要iOS根目錄（有Podfile文件的目錄）下執(zhí)行

執(zhí)行安裝命令

$ pod install

現(xiàn)在我就來實(shí)現(xiàn)從原生頁面跳RN頁面

使用RN提供一個(gè)View視圖代碼如下

NSURL * jsCodeLocation;
#ifdef DEBUG
    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    jsCodeLocation = [NSURL URLWithString:strUrl];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif
    
    NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"這是原生傳遞的參數(shù)"}};

    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"iOSRN"
                                                  initialProperties:params
                                                      launchOptions:nil];
    self.view = rootView;

修改RN頁面的入口文件，這里當(dāng)是iOS入口我們修改index.ios.js文件，當(dāng)Android入口，我們修改index.android.js文件

index.ios.js文件

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

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,
" +
    "Cmd+D or shake for dev menu",
  android: "Double tap R on your keyboard to reload,
" +
    "Shake or press menu button for dev menu",
});

type Props = {};
export default class App extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit App.js
        
        
          {instructions}
        
      
    );
  }
}

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

AppRegistry.registerComponent("iOSHybridRNDemo", () => App)

到這里，我們一個(gè)簡單的原生嵌入RN開發(fā)工程就搭建完成了，我們執(zhí)行下面命令來運(yùn)行項(xiàng)目，查看效果

開啟node 服務(wù)

$ npm start

運(yùn)行效果

作者React Native開源項(xiàng)目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star

作者簡書主頁：包含60多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.jianshu.com/u/023338566ca5 歡迎小伙伴們：多多關(guān)注，多多點(diǎn)贊

作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)

友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝大家支持！