iOS原生混合RN开发详解做过原生iOS开发或者Android开发的同学肯定也对Hybrid有所了解，有一定的Hybrid开发经验。目前我们企业开发中使用最多的HybridApp技术是原生和H5混合。那个时候可能有同学接触过PhoneGap等混合技术。今天我们就来简单说说一种比较新的混合技??术方案，nativeApp和ReactNativieHybrid。如果有对ReactNative技术不熟悉的同学，可以看看作者讲解ReactNative基础知识的简书：ReactNative入门到实战讲解Demo地址初级Demo示例高级Demo示例具体步骤创建iOS原生projectSupportpodsforiOSnativeprojects调整当前项目project文件夹结构添加RN依赖相关文件安装ReactNative修改Podfile文件，原生安装ReactNative依赖库在iOS原生页面添加RN页面入口修改RN入口文件index.ios。js执行npmstart运行项目创建一个iOS原生项目使用Xcode创建一个空项目，不用多说，项目支持pod的操作步骤也很简单。我们只需要执行以下命令。如果不熟悉cocoapods的安装和使用，请参考作者的简书创建podfile文件。我们在与xcodeproj文件同目录下执行以下命令。这时我们的项目文件中多了一个Podfile文件$podinit执行podinstall命令安装pod。同样，这条命令也安装在与xcodeproj文件相同的目录下。完成后我们的项目多了一个$podinstall注意：这里对原生iOS不熟悉的同学需要注意一下。当我们使用pod作为库管理工具时，我们会在后面打开项目运行。我们需要打开上图。这里显示的xcworkspace文件调整了当前工程工程的文件夹结构。这里调整文件夹结构的目的是为了后期更好的将RNHybrid用于原来的Android项目，让iOS和Android共享一个ReactNative框架，共享相同的JS文件，调整后的文件夹结构如下添加RN依赖相关的文件在这里，我们原生的iOS项目目录结构已经调整，后面需要处理RN相关的内容，这里需要创建的文件非常多，大家可以您可以直接将示例Demo中的这些文件拖到您自己的项目中，然后进行修改。首先，我们需要创建一个package.json文件，创建一个index.ios.js文件，创建一个index.android.js文件，并创建一个bundle文件。注意这个文件夹是我们后面接入CodePush热更新时要用到的ReactNative的安装。安装ReactNative也非常简单。我们也可以简单地执行以下命令。注意：要执行npm系列命令，我们都需要在项目根目录（有package.json文件的目录）执行$npminstallpackage.json，文件内容如下{"name":"iOSHybridRNDemo","version":"0.0.1","private":true,"scripts":{"start":"nodenode_modules/react-native/local-cli/cli.jsstart"},"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"}}注意：因为我们项目中使用了react-native-vector-icons，所以iconFont组件需要依赖native，所以我们执行完npminstall之后，还需要再执行一次react-nativelinkreact-native-vector-icons命令安装native依赖$react-nativelinkreact-native-vector-icons我们执行npminstall命令后，打开项目目录，发现多了一个node_modules文件夹，这个文件夹就是我们安装的所有ReactNative的依赖库，修改Podfile文件。原生安装ReactNative依赖库后，我们将使用Pod来管理原生依赖库。安装ReactNative依赖库，我们只需要复制下面的Podfile文件，在里面添加内容，执行podinstall安装Podfile文件#取消注释下一行，为你的项目平台定义一个全局平台:ios,'9.0'#如果你正在使用Swift或想使用动态框架，请取消注释下一行#use_frameworks!target'iOSHybridRNDemo'do#PodsforiOSHybridRNDemo#****************************************************************************##‘node_modules’目录一般位于根目录下#但是如果你的结构不一样，那你就要根据实际路径修改下面的`: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'#继续在这里添加你需要的module]#如果你的RN版本>=0.42.0，请添加以下行pod"yoga",:path=>"../node_modules/react-native/ReactCommon/yoga"#******************************************************************************#pod'RNVectorIcons',:path=>'../node_modules/react-native-vector-icons'尾注：#*************************#中间的内容是我们需要添加的RN依赖库，后面我们所有的pod相关命令，我们都需要iOS根目录（有Podfile文件的目录），执行安装命令$podinstall在iOS原生页面添加RN页面入口下面我将从原生页面跳转到RN页面，使用RN提供一个View视图的代码如下NSURL*jsCodeLocation;#ifdefDEBUGNSString*strUrl=@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";jsCodeLocation=[NSURLURLWithString:strUrl];#elsejsCodeLocation=[CodePushbundleURL];#endifNSDictionary*params=@{@"componentName":@"MeApp1",@"args":@{@"params":@"这是native传入的参数"}};RCTRootView*rootView=[[RCTRootViewalloc]initWithBundleURL:jsCodeLocationmoduleName:@"iOSRN"initialProperties:paramslaunchOptions:nil];self.view=rootView;修改RNentry文件index.ios.js修改RN页面的入口文件，这里我们修改index.ios.js文件为iOS入口，修改index.android.js文件index.ios.js文件为Androidentry.importReact,{Component}from'react'import{Platform,StyleSheet,Text,View,AppRegistry}from'react-native';constinstructions=Platform.select({ios:'按Cmd+R重新加载，\n'+'Cmd+D或摇动开发菜单',android:'双击键盘上的R重新加载,\n'+'摇动或按下菜单按钮fordevmenu',});typeProps={};exportdefaultclassAppextendsComponent
