windows下react-native环境搭建

首先不得不先吐槽一下自己,一个坑总是踩很多次,且乐此不疲。 咋办? 写博客记录记录呗。

零、记录的点

  1. Java环境的下载与配置
  2. Android环境的下载与配置
  3. Node环境的下载与配置
  4. 创建第一个react-native应用

最终能够达到的目的:在手机上能够运行第一个React-Native应用~

以备后用,已将安装包上传到了网盘 密码:bqbc

一、Java环境的下载与配置

记录下Java里面的三个术语理解

JDK是什么?

答曰:JDK乃【Java开发工具包】 (Java Development Kit ) 的缩写, 是一种用于构建在 Java 平台上发布的应用程序、applet 和组件的开发环境

JRE是什么?

答曰:JRE乃【Java运行环境】(Java Runtime Environment)的缩写, 其包含JVM标准实现及Java核心类库

JVM是什么?

答曰:JVM是【Java虚拟机】(Java Virtual Machine)的缩写

下载安装配置JDK

  1. 官网 或者android-studio下载JDK
  2. 安装JDK,我安装到的D:\Software\JavaJdk
  3. 必须得配置环境变量滴 ①java_home:D:\Software\JavaJdk ②classpath(.;开头):.;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar ③追加path变量的值:;%java_home%\bin

二、Android环境的下载与配置

下载Android SDK

android-studio下载SDK。 运行installer_r24.4.1-windows.exe安装、或zip解压出来的SDK Manager.exe

然后我安装了以下这些包(我的react-native版本是0.40.0)

SDKManager使用说明

被镜像坑了,所以不推荐镜像,直接修改hosts文件就成--->去找最新的hosts 镜像地址--->去找最新的镜像地址

镜像使用说明

使用镜像安装不了23.0.1的同学趁早换hosts的方式或者挂vpn。

科学上网还是得备个vpn呐~~~

SDK包下好了,接下来就配置系统环境变量吧

①ANDROID_HOME:D:\Software\JavaAndroidSdk ②追加path变量的值: %ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;%ANDROID_HOME%; 我的Path图

测试Java环境,Android环境

失败自行回退检查~~

三、安装node.js

node官网历史版本修改下载链接的值就能下载历史版本了 如:我使用的是版本是V6.2.0 然后就是node的一些设置了 npm config set prefix "D:\Program Files\nodejs\node_global //设置全局包目录 npm config set cache "D:\Program Files\nodejs\node_cache //设置缓存目录 npm config set registry https://registry.npm.taobao.org //设置淘宝镜像

之前有安装过node,卸载旧版重新安装到之前的目录就==升级了 npm升级命令npm update

四、创建第一个在手机上运行的react-native应用

  1. 启动CMD定位到开发目录:例F:\ReactDemo
  2. 全局安装npm install -g react-native-cli
  3. 初始化一个项目:react-native init yimoapp
  4. cd yimoapp
  5. 运行packager:react-native start 如果你碰到了ERROR Watcher took too long to load的报错,请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。 成功运行这时候可以用浏览器访问http//localhost:8081/index.android.bundle?platform=android查看服务端是否已成功启动
  6. 真机运行,使用usb连接手机,开启USB调试权限
  7. 查看连接的设备:adb devices
  1. react-native run-android构建工程并自动安装到手机 不要慌,先做点准备工作。手动下载gradle-2.4-all.zip到本地 修改 F:\ReactDemo\yimoapp\android\gradle\wrapper\gradle-wrapper.properties文件的distributionUrl配置为[本地的gradle-2.4-all.zip路径]以使其可离线下载
  1. 包安装得差不多的时候会提示你安装应用

可能会有一个这样的错误,奇怪的是第一次安装有,这一次安装就没有遇到了。

将android/build.gradle文件中的 classpath 'com.android.tools.build:gradle:1.3.1' 改为 classpath 'com.android.tools.build:gradle:1.2.3' 。猜测是插件包不兼容导致。

  1. 解决白屏问题 找到并开启应用的悬浮窗权限,以mui8.1为例,设置->授权管理->应用权限管理->yimoapp->勾选显示浮窗权限 然后再次打开yimoapp。我去。这次来个大红色的错误了

咋办。摇一摇说不定有奇迹

在回退刷新前。我去改了改index.android.js,好了回到页面摇一摇然后刷新

总结与收获

总结记录是很有必要的。 有很多问题是在Java和Android环境没有弄好的情况下会出现的。

参考文章:

  1. http://www.tuicool.com/articles/26byiuZ 这里面的错我也都遇到过~~
  2. http://www.cnblogs.com/suxun/p/5220564.html 有配置模拟器的

一天就这样结束,一天就这样开始。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云原生架构实践

JHipster生成微服务架构的应用栈(四)- 网关微服务示例

默认端口号是8080,也可以自己输入端口号,注意不要和别的微服务和进程的端口号冲突。

2992
来自专栏蓝天

ZooKeeper-3.4.6分布式安装指南

介绍ZooKeeper-3.4.6版本的分布式安装,力求细致,提供精确的安装指导。本文的安装环境是64位的SuSE 10.1 Linux,也适用于ZooKe...

1451
来自专栏张首富-小白的成长历程

用户相关的文件及命令

Linux system每个文件和进程,都需要对应一个用户和组, Linux system是通过UID和GID来识别用户和组的。用户名相当于人名,UID相当于×...

1354
来自专栏蓝天

LINUX内存高,触发OOM-KILLER问题解决

Linux alarm 2.6.9-67.ELsmp #1 SMP Wed Nov 7 13:58:04 EST 2007 i686 i686 i386

2002

如何自动地将代码从Git平台部署至组件容器

将源代码从Git平台部署至组件容器有很多种可以选择的方法,包括重新部署整个容器,通过卷即时重新部署,或者使用“git clone”的方法。但是,当这个过程自动化...

2379
来自专栏蓝天

eclipse的thrift插件

插件网址为:http://thrift4eclipse.sourceforge.net/en/install.html,经测试对Eclipse 4.4.2也有...

1323
来自专栏pangguoming

kafka 主要内容介绍

根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能:

1345
来自专栏我的博客

TP入门第五天

1、数据库连接 这里说下为和用到配置都是返回数组,$arr=include(‘config.php’);然后你打印出来看看! 配置文件(有两种连接方法) 第一种...

3164
来自专栏云原生架构实践

JHipster生成单体架构的应用示例

因为这个例子是生成单体架构的应用,所以这里选择默认选项Monolithic application,也就是单体架构的应用。

9572
来自专栏CodeSheep的技术分享

centos7上elastic search安装填坑记

1796

扫码关注云+社区

领取腾讯云代金券