Windows下的react-native 开发环境配置

一、准备软件

1.安装Node.js

官网下载:http://nodejs.cn/download/,之后安装,新版本不用配置环境变量。

查看版本

nodejs.png

如图所示即为安装成功。

2.安装Java SE

官网下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

配置环境变量:

a.计算机 → 属性 → 高级系统设置 → 高级 → 环境变量

b.系统变量 → 新建 JAVA_HOME 变量 ,变量值填写 jdk 的安装目录。

c.系统变量 → path → 变量值输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; ,注意末尾的分号。

d.系统变量 → 新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

查看版本

java se.png

如图所示即为安装成功。

3.安装React-Native Cli

打开cmd,输入

 npm install -g react-native

查看版本,cmd下输入

 npm info react-native
react-native cli.png

如图所示即为安装成功。

ps: npm淘宝镜像

第一步,找到nodejs的安装目录 例如 C:\Program Files\nodejs\node_modules\npm,并找到 npmrc 文件

第二步,打开npmrc文件,添加

registry=https://registry.npm.taobao.org

效果如下:

prefix=${APPDATA}\npm
registry=https://registry.npm.taobao.org

4.安装Android Stdio

下载地址:http://www.android-studio.org/index.php/download/hisversion

2.0以上的版本都支持react-native

a.软件设置

sdk.png

b.环境变量设置

1)新建ANDROID_HOME, 变量值为Android SDK的路径。

2)path变量值添加
%ANDROID_HOME%\platforms;%ANDROID_HOME%\platformtools;%ANDROID_HOME%\tools;\

二、创建react-native 项目

1.新建一个文件夹 ,例如reactDemo

2.初始化,进入项目目录后,输入

react-native init reactDemo
init.png

成功后:

file.png

3.运行package

cmd输入

react-native start
Paste_Image.png

报错,制定端口运行,成功

react-native start --port=8082
port.png

4,打开模拟器

推荐1:bluestacks 下载地址:http://www.bluestacks.cn/
推荐2:Genymotion 下载地址:链接:http://pan.baidu.com/s/1dEDqdo9 密码:93y8

5.模拟器安装之后,运行项目

react-native run-android

三、运行的各种错误的解决方案

错误1. unable to load script form assets

解决方案:

a. 先手动在main下建立一个assets文件夹(路径:react项目名\android\app\src\main)

b. cmd到项目下输入:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

错误2. Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

解决方案:

在cmd中运行下面的命令

npm add react-native-cli

错误3

500.png

...未完待续...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容