React Native配置和使用

React Native配置和使用（OS X）

个人比较喜欢react的函数式编程方式，native采用同样的方式写原生app，所以也开始学习react native，首先是环境配置以及跑起来第一个ios和android应用。

环境配置

  1. 操作系统使用mac os x进行开发。官方也是将os x作为最高优先级来支持，不过windows和linux可以进行Android开发。
  2. 推荐使用Homebrew来安装基本环境。
  3. 安装Nodejs
    • 直接官网下载安装包
    • 或者使用nvm命令行来安装
  4. 使用Homebrew安装watchman，命令行输入：brew install watchman
  5. 使用Homebrew安装flow，命令行输入：brew install flow
  6. 如果是使用homebrew进行的配置，命令行输入：brew update && brew upgrade 命令保持最新版环境。

ios开发环境

ios只需要从Appstore下载安装xcode7即可。

android开发环境

安装开发环境相比较要麻烦一些。

  1. 安装git,命令行输入brew install git。如果已经安装了xcode，则不需要安装。

  2. 安装最新的JDK

  3. 使用Homebrew安装android-sdk，命令行输入：brew install android-sdk

  4. 配置ANDROID_HOME环境变量：采用上述命令安装android-sdk，安装路径是/usr/local/opt/android-sdk，如果是别的方式安装的，则需要找到对应的安装目录。编辑~/.bashrc或者 ~/.bash_profile文件，添加以下代码：

     export ANDROID_HOME=/usr/local/opt/android-sdk

  5. 配置android sdk

    • 打开Android SDK Manager，命令行输入android 即可打开。根据官方网站的要求勾选需要的包：
      • Android SDK Build-tools version 23.0.1
      • Android 6.0 (API 23)
      • Android Support Repository
    • 选择需要安装的包，如下图：
      SDK Manager window
      SDK Manager window
      点击"Install Packages"即可。
    • 注意，可能会遇到一些坑
      • 要根据官网所要求的包进行安装，例如目前Android SDK Build-tools官网文档中要求版本是23.0.1，最新版本是23.0.2，要看清楚版本号进行安装。
      • Android Support Repository现在的名字变成Local Maven repository for Support Libraries

  6. 配置安卓模拟器
    官方建议使用Genymotion来安装配置模拟器。需要注册账号，下载个人免费版，然后启动程序需要安装VirtualBox等。
    个人觉得直接利用Android SDK Manager下载相应的包，启动谷歌自带模拟器更简单一点。配置过程如下：

    • 勾选安装包：
      • Intel x86 Atom System Image
      • Intel x86 Emulator Accelerator (HAXM installer)
        点击"Install Packages"
    • 配置HAXM
    • 创建一个模拟器（ Android Virtual Device，AVD）
    • 命令行输入android avd,打开avd管理器，点击Create...新建一个模拟器，填写配置即可。
    • 选择已经建好的模拟器，点击Start...。
      SDK Manager window
      SDK Manager window

    注意：
    前面使用Android SDK Manager下载的HAXM其实并没有安装，只是下载到本地了，还需要手动安装一下，文件下载到了android-sdk目录下的extras文件夹中/usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager

启动第一个应用

使用React Native命令行工具来创建应用

  • 安装React Native命令行工具，命令行输入:npm install -g react-native-cli。
  • 创建React Native项目，命令行输入:react-native init MyReactNativeApp。

运行ios app

  • 进入到初始化安装目录$ cd MyReactNativeApp。
  • 使用open .命令打开该目录，点击ios/MyReactNativeApp.xcodeproj项目文件，使用xcode打开该项目。
  • xcode中运行该项目，即可打开模拟器，看到初始化的ios app的效果。
  • 修改index.ios.js，然后在模拟器中使用command+r重新加载app。

运行android app

  • 运行之前设置好的安卓模拟器。
  • 进入到初始化安装目录$ cd MyReactNativeApp。
  • 命令行输入$ react-native run-android，运行该命令React Native会下载并使用gradle编译该项目。编译成功后，app即可在安卓模拟器中打开。(过程中会下载gradle，有时候命令行可能会卡住，多尝试几次即可)
  • 修改index.android.js，然后在模拟器中使用F2重新加载app。
  • 命令行中输入adb logcat *:S ReactNative:V ReactNativeJS:V，即可在命令行终端看到app运行的日志。
  • 注意:如果初始化的项目编译不通过，请检查Android SDK Manager中是否存在没有安装好或者版本不正确的package。
    SDK Manager window

主要是参考官方文档进行的配置，在配置android环境过程中遇到了一些麻烦。

posted @ 2016-04-06 23:33  yongjz  阅读(483)  评论(0)  编辑  收藏  举报