mac搭建并运行react-native项目

介绍点啥

网上有很多react-native的入门教程，当然坑也很多。一方面是到处拼凑起来的资料，没有实际运行，很可能是有问题的；另一方面，对配置和运行中出现的问题没有详细介绍怎么解决（也可能是人家运气好，没有碰上）。
我是第一次研究移动端应用的开发，完全不懂Android和iOS这一类的技术。react-native略懂思路，所以按照书上和网上的教程做下来，遇到好多问题。这里分享出来，给同样运气差的你一个方向。

下载开发工具和组件

• Homebrew得会啊，不会的话去看看吧
• Android studio（非必须，只用sublime就能开发）
• sublime 3
• node.js
• flow（非必须，js强校验工具）
• watchman（文件变更监控，react-native可以实现热更新）
• react-native-cli（命令行工具）
• xcode（基本上在终端启不来iOS版本的话，只能用xcode来编译了）
• cocoapods（iOS版本开发必须）
• yarn（Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载）

1. 安装node和watchman

brew install node
brew install watchman

安装完node后要修改镜像地址，否则安装组件慢如牛，还不一定能装上

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2. 安装yarn和react-native-cli

npm install -g yarn react-native-cli

安装完后也要修改镜像地址

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

3. xcode在app store安装就行
4. cocoapods比较坑，后面介绍安装

初始化项目

找一个你喜欢的角落，执行

react-native init YouLikedProjectName

完成后就会新建一个名为YouLikedProjectName的文件夹，里面有Android和iOS版本的项目源码以及各种依赖库文件。

在这个过程中就有坑了，注意

1. 一些模块地址被墙，下载不到，就需要proxy了
   s开启全局模式，并不代表terminal也可以走代理。另外，terminal只能设置http代理，无法走https；而且，ping命令是无法确认是否走代理了，只能用curl或wget来确认。同样，Android studio也需要手动设置代理，否则无法下载依赖的包。怎么样，坑多么？干的漂亮。

• privoxy工具来解决这个问题
• Android studio设置代理
  当然代理端口要设置为privoxy配置的本地监听端口啊。

2. 下载cocoapods慢的要死，几十分钟后还来一个失败
   直接ctrl+c中断，不用等了，执行下面的命令

   $ brew install cocoapods 
   $ cd ios
   $ pod install --repo-update
   

   懂了么，用brew来装cocoapods，然后到项目目录里更新。参考1 参考2

   如果中途遇到SDK “iphoneos” cannot be located这样的错误，参照来指定command路径，然后重新pod install --repo-update就搞定了。

启动项目-Android

1. 映射端口

adb reverse tcp:8081 tcp:8081

这样就可以把手机和电脑的8081端口映射在一起。

2. 启动监听服务

react-native start

3. 运行项目

react-native run-android

如果遇到react-native No bundle URL，参考下面iOS的解决方案。

启动项目-iOS

• 注意一定先运行react-native start，启动监听服务。然后再运行react-native run-ios
• 如果命令行启动失败，那就只能开xcode来编译了。注意，必须打开后缀名是xcworkspace的文件，如果只打开xcodeproj，编译可能会报错：Xcode build error linker command failed with exit code 1
• 如果提示找不到一些头文件，比如：

Error building: 'React/RCTBridgeDelegate.h' file not found; 'React/RCTBridge.h' file not found
Exception: 'React/RCTLog.h' file not found

那么去修改Header Search Paths，增加：
$(SRCROOT)/Pods/Headers/Public
$(SRCROOT)/…/node_modules/react-native/React
注意，要选择递归查找。

• 启动成功后，模拟器开启，上传应用后，打开发现react-native No bundle URL present
  
  检查两个地方：

1. 是否执行过react-native start
2. 是否开启了代理（需要关闭）
   确认两个都没问题，在模拟器中删除应用，然后清理xcode编译后文件：Product——Clean Build Folder，再重新Build，看到如下界面，完美了。