• 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环境过程中遇到了一些麻烦。

  • 相关阅读:
    Convert CString to std::string
    VC 使用预编译头
    [转]Windows下使用doxygen阅读和分析C/C++代码
    [SCOI2016]背单词
    Linux配置日志服务器
    网络学习day02_OSI七层模型及数据的传输过程
    网络学习day04_VLSM、子网划分
    XSS闯关游戏准备阶段及XSS构造方法
    网络学习day03_IP地址概述与应用
    网络学习day01_计算机网络与分层思想
  • 原文地址:https://www.cnblogs.com/yongjz/p/5361739.html
Copyright © 2020-2023  润新知