咱们研讨RN要处理俩工作，一是怎样在已有工程里跑起来，都有哪些坑；二是怎样在已有的cocoapods工程中把RN当成一个普通组件来运用

浏览官方文档，helloword走起

官网地址（中文版） 官网地址英文版

  • 首先创立一个空的xcode工程，加个按钮用于吊起RN页面

  • Xcode工程做成cocoapod办理组件，pod init以下，然后update即可

  • 依照官方教程装置环境，装备Podfile依靠（工程跑不起来，各种装置失利）

依据官方教程走不通，可是能够了解整个集成流程，然后便是剖析podfile怎样装备才能pod update成功。官方教程除了pod update找不到组件的问题之外，还有便是他的方式有很大问题，加了那么多pod path指向的组件！这个问题不处理，相信许多人就不想运用RN了

处理Podfile 组件依靠问题和pod update失利问题

  • 环境装置有问题，改进如下：(留意不必指定版本号，也没有官网说的那些警告，都默许运用最新即可)


 npm install react-native react
 brew install react-native-cli bundle
  • podfile不要像官网那样写一堆依靠，我的是这么写的

 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 platform :ios, '15.1'
 target 'Example' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  pod "Masonry" 
  config = use_native_modules!
  use_react_native!(
           :path => config[:reactNativePath],
           # to enable hermes on iOS, change `false` to `true` and then install pods
           :hermes_enabled => false
           )
           
  post_install do |installer|
   react_native_post_install(installer)
  end
 end

这里有几点特别重要的需要知晓

* podfile本身本质上便是ruby文件，cocopod读取的时分是作为rb脚本来处理的，因此能够直接运用ruby的require_relative，这个有点像import，也便是指定一个文件夹途径，ruby会主动读取里边的ruby文件，这样就主动把相关依靠引入了。

*** 许多工程装备的platform仍是9.0吧？RN大概率是会失利的，因为RN的cocoapod装备要求的高，导致pod update失利，能够先用15

* 再便是use_react_native才是要害，他是装置RN组件的要害，没有这句就不会装置组件。post_install 那句不加也没问题，但保险起见我加上了

环境依照我说的装置，podfile装备完结之后，剩下的demo就依照官网的写，首先在命令行里履行npm start ,然后直接打开xcode工程运行即可看到RN成功跑起来了，可是如果你现在用的是真机，估量页面效果没收效，因为还有俩坑，如下：

  • demo里这句代码的localhost换成你的本机ip，手机和电脑运用同一个wifi才行 NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

  • info.plist里别忘了装备App Transport Security Settings

至此，你的工程必定能跑起来，而且看到RN的页面成功展示了！

目前为止并不具备落地条件，你要打包工程看效果，还要所有人履行npm start？让所有人把工程放node目录下的ios目录下面？搞笑呢吧哈哈

处理已有的工程放到RN下面的问题

目前为止，你的工程是在RN的根目录下的ios目录下面，这样会很奇怪。有没有办法让iOS项目和平时没有差异，RN作为组件随意可插拔集成呢？有。

处理方案在官网有提过，可是没有翻译，许多人可能会忽略，内容如下


Note that RCTRootView initWithURL starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using [RCTRootView alloc] initWithURL, use RCTBridge initWithBundleURL to create a bridge and then use RCTRootView initWithBridge.
When moving your app to production, the NSURL can point to a pre-bundled file on disk via something like [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];. You can use the react-native-xcode.sh script in node_modules/react-native/scripts/ to generate that pre-bundled file.

这是官方给的提示，许多人介绍RN的时分都不会提及。咱们的RN入口和功用都只是一个index.js文件，了解前端的都知道，js是能够被打包成bundle的，而官方的这段提示便是突破口，首先是将js打包成bundle，办法如下：


react-native bundle --entry-file index.js --platform ios --dev false --bundle-output "./index.jsbundle"

官方给出的方案是履行 /node_modules/react-native/scripts/react-native-xcode.sh 脚本文件，js和资源都会主动打包，我试了下是失利的，原因是他们还要求放xcode工程的的shell下面履行才行，这就会有个问题，工程仍是有必要放node下面的ios目录下面，为了处理工程不放ios目录下面的问题，咱们用上面的bundle命令来打包js文件

如果有资源文件的话，运用下面的脚步


react-native bundle --entry-file index.js --platform ios --dev false --bundle-output "./index.jsbundle" --assets-dest "./assets"

将打包出来的index.jsbundle文件直接拖进xcode工程，然后改下调用方式如下：


NSURL *jsbundle = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"jsbundle"];
 RCTBridge *bridge = [[RCTBridge alloc]initWithBundleURL:jsbundle moduleProvider:nil launchOptions:nil];
 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"RNTest" initialProperties:@{}];
 UIViewController *vc = [[UIViewController alloc] init];
 vc.view = rootView;
 [self presentViewController:vc animated:YES completion:nil];

至此，你不必履行npm start敞开服务，直接履行xcode工程即可吊起RN页面，现在的开发和集成RN之前流程是相同的！

持续集成主动化的构思

许多公司打包都有持续集成，如何主动化？要处理的问题有： 1，bundle打包主动化 2，bundle导入到工程主动化

  • bundle打包主动化很简单，RN工程作为一个独立组件，xcode工程便是RN组件的demo测试工程，组件发布成cocoapod库的时分主动履行bundle打包js和资源等，将生成的bundle作为cocoapod资源，有pod统一办理

  • bundle导入到工程主动化，既然RN是一个独立组件，就能够和其他pod库相同依靠到主工程，在用到的当地读取组件中的bundle资源来加载RN

集成RN对包体的影响


包体数据以iphone12上的包体为例(不同机型巨细不同), ipa巨细 和 解压后的.app文件巨细（接近用户下载巨细）如下：
工程集成RN前 : 291kb - 1.1M
工程集成RN后 : 2.2M - 9.5M