开发环境搭建

1、Homebrew

Mac系统基于ruby的包管理工具，解决安装Linux平台下开源工具时的库依赖等配置问题。

下载：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"（注：/usr/local目录不可写时，sudo chown -R `whoami` /usr/local 修复。）

使用：brew -v、brew list、brew search wget、brew install wget、brew remove wget

2、Node.js

brew install node安装NodeJS环境。

node -v，版本8.2.1。npm -v，版本5.3.0

注：安装完成后发现npm命令找不到（-bash: /usr/local/bin/npm: No such file or directory）。npm，node.js的包管理工具，一般在install node的时候即一同安装，但我在安装时因mac系统更新时旧版留在了错误的文件夹路径中，而且重装node.js时并没有覆盖掉，所以从错误的路径中手动删除（usr/local/bin中的npm显示原身，删除）。

3、npm install -g react-native-cli

ReactNative的命令行包管理工具。

//成功

/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js

+ react-native-cli@2.0.1 

added 41 packages in 5.394s

4、react-native init TestProject

在想要新建react-native项目的文件路径下执行，init后是自定义文件名

5、项目目录下react-native run-ios，或打开.xcodeproj直接运行（直接新建的reactnative项目不需要手动npm start，但旧项目集成reactnative需要在正确的路径下npm start）

已有项目接入ReactNative（此过程非常脆弱）

cocoapods接入

写在前面（重要）：此次尝试是严格按照官网流程，导入当前最新版本0.46.4，但经历了痛彻心扉的失败，后来尝试引入0.29.2旧版本成功，于是对其全过程进行简要的分析记录。

1、项目目录下新建ReactComponent文件夹放入node_modules文件夹（旧版引入请使用备份、最新版可直接拷贝init的新项目中的文件夹）、index.ios.js（reactnative的root起点文件）、和package.json（此文件用于npm start启动服务）。

2、proflie中的本地引入配置（！注意路径的配置！）：

旧版

pod 'React', :path =>'./ReactComponent/node_modules/react-native', :subspecs => ['Core', 'ART', 'RCTLinkingIOS', //根据需要引入 ]

新版

pod 'React',:path=>'./ReactComponent/node_modules/react-native',:subspecs=>['Core',

'DevSupport' #RN>=0.43时需要app内的menu应加DevSupport,

'RCTText',

'BatchedBridge'#RN>=0.46时必须引入 //根据需要引入]

# RN>=0.42.0 时应加入Yoga

pod "Yoga",:path=>"./ReactComponent/node_modules/react-native/ReactCommon/yoga"  //还纠结了双引号单引号的问题，实际证明并无影响

3、配置info.plist中的NSAppTransportSecurity避免http访问失败（实际好像模拟器调试时并不会失败url--http://localhost:8081/index.ios.bundle?platform=ios&dev=true）

配置NSAppTransportSecurity

4、新建ReactRootVC在viewdidload中加入以下代码，npm start启动服务，运行。

NSString* strUrl =@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";

NSURL* jsCodeLocation = [NSURLURLWithString:strUrl];

//注意项目名ProjectName与index.ios.js和package.json中的匹配

RCTRootView* rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ProjectName" initialProperties:nil launchOptions:nil];

self.view= rootView;

5、0.46.4版本的引入失败

所有步骤都相同，编译的时候遇到如下错误

pod引入reactnative0.46.4版本出现的编译错误

但是！！！最后！！！机智的我解决了这个问题。链接如下

https://github.com/facebook/react-native/issues/14925

简要来说就是0.46以上版本pod的配置应在profile里添加BatchedBridge的子模块依赖，教程里没有更新。

意不意外！？惊不惊喜！？

手动集成

本来打算再来一遍，但是既然pod引入问题已经解决，这块就不写了。

Tip

由于node_modules组件包很大，上传git的版本应忽略此文件夹（ReactComponent/*）。