windows安装React Native开发运行环境
React Native是什么
React Native是facebook开源的一个用于开发app的框架。React Native的设计理念:既拥有Native (原生) 的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普片存在的痛点,自2015年9月份开源不到1周github star破万。
虽然React Native官方声明开发需要使用mac本,但是如果只是想用React Native来开发一个android应用,也是可以在windows下进行的。
React Native配置开发运行环境
安装java运行环境
此处省略,网上教程一大堆,通过java -version检查是否成功。
安装android SDK
- android SDK下载地址:AEZO.CN备份 (提取码:3fb4)
在sdk的安装目录运行SDK Manager,选择以下项目,再点击install packages(注意勾选的SDK platform-tools和SDK Build-tools版本要一样)
安装bluestacks
- 下载地址:bluestacks
- 安装完成后,电脑上就可以跑app程序了
安装nodejs
React Native是基于js的,node.js是轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本
- 下载地址:nodejs
- 使用
node -v
(显示版本号)检查是否安装成功
安装react-native命令行工具react-native-cli
- 下载React Native:React Native 点击Download ZIP进行下载
- 将文件解压到某目录,如:D:\software\react-native
- 在命令行进入到react-native目录下的react-native-cli,运行命令
npm install -g
,安装好之后,可以在命令行运行react-native命令了。安装得一会,如果一直没反映,重启CMD再次运行
创建RN(React Native)项目
- 命令行进入你希望创建项目的目录后,输入
react-native init DemoProject
,等待一段时间(较慢)
运行package
- 在命令行中进入项目目录DemoProject,输入
react-native start
,等待一段时间 - 这时候可以用浏览器访问
http://localhost:8081/index.android.bundle?platform=android
,如果可以访问表示服务器端已经可以了
运行项目
- 启动bluestacks,或者将手机连接到电脑(手机要启动USB调试模式,命令
adb devices
可以查看当前设备) - 刚刚运行package的命令行不要关闭,重新启动一个新的命令行
- 法一:
- 进入项目目录DemoProject,输入
react-native run-android
- 等待运行(如果是第一次运行,首先会下载gradle,时间较长)
- 进入项目目录DemoProject,输入
- 法二(推荐):
- 打开DemoProject\android\gradle\wrapper目录下的gradle-wrapper.properties文件
- 将distributionUrl后面的链接改为国内镜像地址
http://mta.zttit.com:8080/images/gradle-2.4-all.zip
- 进入项目目录DemoProject,输入
react-native run-android
(不要关闭package的命令行)。此时bluestacks已经安装上了此应用,如果没有可以在DemoProject\android\app\build\outputs\apk目录下找到app-debug.apk文件即是生成的安装包
访问应用
- 第一次手机肯定报错
- 这时候点击bluestacks左边菜单栏的抖动(如果直接连接手机,摇一摇手机即可),点击
Dev Settings
后,点击Debug server host & port for device
,设置IP和端口。这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081 - 设置完成后,回到空白页面,再次摇一摇手机,选择
Reload JS
,程序就运行起来,出现Welcome to React Native!
参考
[1] 史上最详细Windows版本搭建安装React Native环境配置
[2] React Native疑难点,问题深坑最强总结帖(不断更新中)
windows安装React Native开发运行环境的更多相关文章
- Windows 安装react native
1.下载node.js (https://nodejs.org/en/) 2.安装node.js,安装完成后按住 图标键+R ,输入CMD进入命令行终端,输入npm -v C:\Users\Admin ...
- Windows下React Native开发01 -- Android开发环境搭建
1.安装jdk 推荐将JDK的bin目录加入系统PATH环境变量(自己百度下怎么配置). 2.安装SDK 直接安装 Android Studio 推荐从AndroidDevTools下载.(也可以直 ...
- React-Native(二):React Native开发工具vs code配置
从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- 【RN - 基础】之Windows下搭建React Native开发环境
前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- Windows版本搭建安装React Native环境配置
1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
[React Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...
- 在Mac上搭建React Native开发环境
概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...
随机推荐
- Tomcat+JDK安装和配置
Tomcat+JDK安装和配置 一.打开FlashFXP软件,建立连接,选择需要的包,右击传输到 /home/guest中 二.进入到:cd /home/guest中,对tomcat包进行解压 三.将 ...
- 题解 P1888 【三角函数】
堆排序万岁! 小金羊又来水题了 #include <iostream> #include <queue> using namespace std; priority_queue ...
- 扶苏的bitset浅谈
bitset作为C++一个非常好用的STL,在一些题目中巧妙地使用会产生非常不错的效果.今天扶苏来分享一点bitset的基础语法和应用 本文同步发布于个人其他博客,同时作为P3674题解发布. 本文感 ...
- C++堆和栈详解(转)
一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其 操 ...
- 洛谷P1012 拼数
题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时,4个整数7,13,4 ...
- mysql ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO)错误解决办法
我的电脑是win10,所用的是mysql5.7.14 近期在学习mysql数据库的时候,遇到了这个错误,我的密码错误了.突如其来的问题,很是蒙蔽,因为我没对数据库设置过密码.通过网上查询,可以通过进入 ...
- 再谈System.arraycopy和Arrays.copyOf
之前转载过一篇博文,介绍过这两个方法,今天想要再次详细的了解一下. public static native void arraycopy(Object src, int srcPos, Object ...
- 前端PHP入门-012-回调函数[慎入]
尽力而为,对于WEB前端和美工同学,比较难了!但是你们都学过JS的闭包等操作,那么这里也一定没有问题! 回调函数,可以配合匿名函数和变量函数实现更加优美.复杂的一种函数结构. 回调函数,就是在处理一个 ...
- [DeeplearningAI笔记]序列模型3.1基本的 Seq2Seq /image to Seq
5.3序列模型与注意力机制 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.1基础模型 [1] Sutskever I, Vinyals O, Le Q V. Sequence to Se ...
- [DeeplearningAI笔记]序列模型2.10词嵌入除偏
5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.10词嵌入除偏 Debiasing word embeddings Bolukbasi T, Chang K W, Zo ...