React Native-Mac项目搭建-02

安装依赖

mac安装必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

• Homebrew来安装 Node 和 Watchman

  brew install node
  brew install watchman
  

  设置镜像源

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

  注： Node需要v8.3版本以上

  Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）

• Yarn、React Native 的命令行工具（react-native-cli）

  Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
  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

• JDK
  React Native 需要JDK1.8版本

• Android Studio

  android环境搭建

• 配置 ANDROID_HOME 环境变量
  React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译

  ~/.bash_profile
  

  在文件中加入以下代码

  # 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
  export ANDROID_HOME=$HOME/Library/Android/sdk
  export PATH=$PATH:$ANDROID_HOME/tools
  export PATH=$PATH:$ANDROID_HOME/tools/bin
  export PATH=$PATH:$ANDROID_HOME/platform-tools
  export PATH=$PATH:$ANDROID_HOME/emulator
  

  使用source $HOME/.bash_profile命令来使环境变量设置立即生效（否则重启后才生效）。可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

项目搭建

• 使用 React Native 命令行工具来创建项目：

  react-native init demo
  

• 编译并运行 React Native 应用
  确保运行了模拟器或者连接了真机

  cd demo
  react-native run-android
  

  注：第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具
  如下图即为ok
  

webstorm创建项目

File–>new–>project

Node intercepter填写node.js的路径
create-react-app填写react-native-cli的路径
建好的项目如下

• 项目运行
  1. 第一次运行需要中终端中输入react-native run-android成功以后退出即可
  2. 点击右上角run选择android即可