React Native环境搭建(Windows环境下)

因为作者是一枚安卓程序员,用的是Windows电脑所以这里只简单讲述一下Windows环境下,React Native的环境搭建
1.安装Node.js
这个的话去node官网去下载就好,官网地址,下载完成之后直接傻瓜式安装就好,这里不做多余的讲解。
2.安装Git
Git安装和上面。
3.安装JDK,SDK
作为一个安卓开发程序员,这个是必备技能
4.下载React Native的压缩包
5.设置npm镜像
设置npm镜像的好处就是加速编译
步骤:
1.打开Git窗口
2.然后输入npm,如下:

3.输入命令
命令1:npm config set registry https://registry.npm.taobao.org
命令2:npm config set disturl https://npm.taobao.org/dist
如下所示:

6.配置React Native
刚才下载好的React Native的压缩包就用上了
1.解压,首先我解压到这个目录下

2.用Dos窗口移动到react-native-master这个目录下,接着进入react-native-cli这个目录,执行命令:npm install -g react-native-cli,接着回车耐心等待。

7.创建项目
这里我创建了一个appProjects一个目录,里面存放我要生成的项目,用dos命令进入到这个目录里面,然后Dos命令:react-native init Jun
注意,这里首字母,必须大写,不然会失败


8.运行工程
1.首先进行刚刚生成的项目,然后输入命令react-native start

2.然后,打开浏览器,输入:
http://localhost:8081/index.bundle?platform=android
就会运行处如下结果

9.准备模拟器或者真机安装项目
dos命令react-native run-android,进入编译状态,第一次编译比较慢,会下载很多的pom文件,貌似和很多开源框架有关



eg:在这里,需要注意一下,环境变量这个问题,因为运行ReactNative程序,需要配置安卓SDK的环境变量,因为作者是win10系统,这里只展示一下win10的配置
这里,先设置一个ANDROID_HOME这个环境

这里这个路径只是SDK最外面的路径

上面试第一步,接着在Path下,配置

如图所示和上面那两个文件夹名称一致

大家还有什么问题,欢迎留言,有问题大家一起解决!