React Native与原生项目连接与发布

时间：2023-03-09 18:01:56
React Native与原生项目连接与发布

前面的各种环境配置按照官方文档一步一步来，挺详细，宝宝在这里就不多说废话了。

其次，前面的配置，我参照的这个博主的文章React Native 集成到iOS原生项目

下面是宝宝掉过的坑(半径15M)：

终端报出的warning一定要重视：

  1. 官网上似乎漏掉了react的安装，如果之前没有安装过。

    命令行：npm i react@15.2.1 --save

  2. 我安装过程中，大部分的警告是有有些东西没有更新。根据具体的warning去问度娘，这里就不一一列举了。

  3. cocopod安装过程Podfile记得在终端中用命令vim编写，否则很可能会出现引号的错误。宝宝在这里卡了一次部门聚餐的时间。

React Native原生项目集成发布版生成步骤

  1. 将原生集成的controller文件中的NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";注释

  2. 反注释

NSURL * jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"main" withExtension:@"jsbundle"];



	没有自己写一个出来。   

3. 运行命令行   

	```

react-native bundle --dev false --entry-file /Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/index.ios.js --bundle-output main.jsbundle --assets-dest /Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/
其中， ```/Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/index.ios.js```是index.ios.js的目录，```/Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/```是放react native配置文件的文件目录,根据自己的情况修改。。。

这个坑本宝宝用了一场乒乓球半决赛的时间。之前一直忘了添加后边的--assets-dest命令，熟悉了iOS图片调用机制就不难理解了。

4. 第三部会生成一个main.jsbundle（命令行output取名），用xcode打开本项目，将其拖入项目中，这步很关键，[NSBundle mainBundle]获取的是xcode工程中的文件路径，而有些文件在xcode工程中找不到，拖进的main.jsbundle会指向该文件

相关文章