React Native 入门笔记一 -- Windows下基本环境配置

一、准备工作

首先,需要安装nodejs,可以从nodejs官网下载,注意,React Native 要求node版本在4.0或以上;否则会出错,我建议把node版本升到最新版本,防止后面出现各种莫名其妙的问题,我这里安装的版本是v6.9.3LTS的,安装之后npm也一并安装好了,可以运行命令查看当前node版本和npm版本;

node -v
v6.9.2

npm -v
3.10.9

注意:由于众所周知的原因,国内一些网站无法打开,所以建议先打开VPN等FQ软件,我这里用的是蓝灯,这里一定要注意,否则后面的步骤无法进行; 

二、正式开始

安装Android Studio并配置Android虚拟机

1、下载Android Studio安装包,然后进行安装,安装的过程很简单,直接点下一步即可;安装的过程可能要等待数十分钟,直到点Finish完成;

2、进行环境变量的配置:

a、添加ANDROID_HOME环境变量:

b、将Android SDK的Tools目录添加到PATH变量中

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。

3、打开命令行窗口,输入android,进入到Android SDK Manger,下载我们需要的SDK;

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

  • Extras/Android Support Repository

4、切换到Android 6.0选项卡,注意:必须选择这项,因为React Native目前必须要这个版本的,然后就是等待下载并安装,安装完成后关闭就行,Android SDK Build-tools必须选择23.0.1,否则后面会出现错误 ;

5、下载进行安卓虚拟机的配置,当然,也可以用真机进行测试,首先打开Android Studio,新建一个空白工程,根据实际需要,选择合适的工程目录(project location),强列建议工程目录不要建在C盘,我这里选择的是D盘,其它的采用默认配置即可;

6、点击顶部菜单栏手机图标进行下一步,选择一个模拟设备;

7、点击上图中绿色的三角图标,就可以打开虚拟机了; 

8、至此,Android相关的配置工作就结束了,下面进行React Native工程的构建; 

三、创建React Native工程

1、打开命令行窗口,在弹出的命令框当中输入以下指令,回车

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

2、可以运行下面命令,查看NPM库是否切换为阿里源;

npm config get registry

3、安装react-native命令行工具

npm install -g react-native-cli

4、创建项目,进入工作目录,运行

cd D:\react-native-demos
react-native init AwesomeProject

并耐心等待数(或数十)分钟。

5、运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

6、运行模拟器,保证模拟器处于打开状态;

7、安卓运行,保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。最好提前把VPN等FQ软件打开,确保网络连接状态良好可以下载;运行完毕后可以在模拟器或真机上看到应用自动启动了。

成功后手机界面:

8、接下来就可以用Android Studio或者Webstorm等开发工具进行开发了!

posted @ 2017-01-04 14:12  Jone_chen  阅读(8525)  评论(6编辑  收藏  举报