Win下搭建React Native工作环境实例

711 查看

本文介绍Windows中搭建React Native的具体操作方法。

软件需要

注意电脑位数是32/64位对应的软件可能会不同。

  • 1, Nodejs
    nodejsreact-native工具的运行基础。
    64位下载链接
    32位下载链接
    安装过程中,选择默认的安装方法即可,安装目录可以自己选择,选择C盘或者其他盘。如果node目录不在系统环境变量PATH中(目前的nodejs是默认设置好的),需要设置下,如果node安装目录是C:\nodejs,那么如下设置:
    PATH新增路径;C:\nodejs
    如果安装并设置好路径,可以在终端中输入node -v查看到nodejs的版本号。

  • 2, Git
    Git用于代码管理,与svn类似的工具,同时在react native中会用git获取github上的部分依赖。
    32位下载链接
    64位下载链接
    安装完成后,需要设置系统环境变量。如果Git安装目录是C:\Git,那么需要进行如下设置:
    PATH新增路径;C:\Git\bin

  • 3, JDK
    Jdk是Java运行环境。
    32位下载链接
    64位下载链接
    安装后需要设置下系统环境变量,如果JDK安装目录是C:\Jdk,那么需要如下设置:
    新增环境变量JAVA_HOME设置为C:\Jdk
    新增环境变量CLASSPATH设置为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
    环境变量PATH新增路径;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin


设置环境变量后在终端中输入PATH后的结果
  • 4, Android Studio
    用于Android sdk等等的管理,也是Android开发工具
    下载地址,下载的安装程序包含了Android SDK,过程中会对SDK进行解压,3G大小,请注意盘符空间是否够。


    下载SDK Platforms的资源


    安装后需要设置系统环境变量。
    如果安装的路径是D:\Program Files\Android\sdk,则需要如下设置:
    新增变量ANDROID_HOMED:\Program Files\Android\sdk
    PATH变量中新增路径;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

    之后可以在终端中使用adb命令。


    adb在终端中是可以使用了

安装完成后
  • 5, Genymotion
    该工具是安卓虚拟机,它依赖VirtualBox的引擎。
    下载地址
    安转过程会同时安装VirtualBox

Genymotion安装后的界面

Genymotion需要注册一个帐号(注册入口),之后个人就可以免费使用了,也会提供很多版本的手机Model供选择。


可供选择的虚拟设备(创建时候选择的)

选择一个虚拟设备配置产生后的genymotion,Custom Phone设备是可以使用的

点击start后安卓模拟器的效果
  • 6, 安装react-native命令工具
    在命令行中安装react-native-cli,如下:

    npm安装过程

安装过程可能会比较慢,可以从国内的包管理拉取。npm install -g react-native-cli --registry=https://registry.npm.taobao.org


安装完成后,react-native在终端后是可以使用了

7, 新建项目
文章

推荐:
RNTools是一个分享React Native文章、实例代码以及第三方模块的平台。RNTools官网链接 RNTools应用下载