ReactNative开发实战一之环境搭建(Windows下)
作为微信公众号(Zjiaxin)的开山篇文章------我们将从环境搭建开始:(Windows环境下)
1 首先准备必要的软件和工具:
Python 2、Node、ReactNative、AndroidStudio、WebStorm、Git、Genymotion。
Python2:https://www.python.org/downloads/windows/ (RN目前不支持Python 3版本,所以安装Python2版本);
Node:https://nodejs.org/en/ (我选择的是v8.7.0的版本)
安装完Node后建议设置npm镜像以加速后面的过程(直接在命令行输入如下命令,回车执行)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Facebook提供的替代npm的工具Yarn(yarn也可以不用安装),可以加速node模块的下载,以及安装React Native的命令行工具(react-native-cli);命令执行如下:npm install -g yarn react-native-cli (其中-g是全局安装,需要在任何目录中执行yarn以及react-native命令的)
安装完yarn也需要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
注:Python和Node可以直接下载安装。
配置Python和Node的环境变量:
检查环境变量,我们可以通过cmd进入命令,输入Python与Node -v 查看安装的版本(如下)
AndroidStudio:http://www.androiddevtools.cn/ 需要安装2.0及以上版本,其中jdk版本需要1.8,安装后配置好环境变量可以通过javac -version 查看jdk版本,sdk build tools(必须是23.0.1版本),同时需要勾选AndroidSupportRepository。
jdk和sdk环境变量配置如下:
path中需要配置如下:
WebStorm:https://www.jetbrains.com/webstorm/ RN项目开发工具选用WebStorm,当然也可以使用Sublime等编辑器。直接安装即可,当然ws是收费的,官网显示免费试用30天,网上也有破解版的方法,自行查找。
git:代码管理工具 http://gitforwindows.org/ 在安装过程中注意勾选"Run Git from Windows Command Prompt",这样才会把git命令添加到PATH环境变量中。
Genymotion:https://www.genymotion.com/account/login/ 推荐使用这款模拟器,当然也可以使用AS自带的。需要注册账号,登录后下载安装,Genymotion需要依赖VirtualBox虚拟机(这里不过多讲解了)。
好了,到这里我们的开发工具都安装完毕了,下面开始创建我们第一个ReactNative项目!
分割线
2 创建ReactNative项目:
我们打开cmd命令行,cd到我们的workspace下,使用 react-native init RnProject --version 0.50.3 创建一个指定rn版本为0.50.3的名为RnProject的项目。我这里目前的项目都是0.50.3版本,大家也可以选择其他版本,RN对版本的要求很高,所以我这里指定版本。注意版本号必须精确到两个小数点。
初始化完毕后会出现这样的提示:
cd到项目根目录,使用react-native run-android命令运行Android项目。会弹出node窗口,不要关闭它。当我们看到BUILD SUCCESSFUL时候,恭喜您,项目已经运行在模拟器中。
然后我们使用webstorm打开项目,根据初始项目提示我们修改App.js中的内容,保存后在模拟器中使用RR刷新页面也可以调出菜单,
Reload:重新加载刷新页面
Debug JS Remotely: debug调试
Enable Live Reload: 热更新,等等。
修改内容如下:若开启Enable Live Reload,在项目中保存立即刷新页面。
分割线
3 Git提交项目:
我们已经安装配置好git了,使用WebStorm上传项目之前需要进行如下配置,
File-->Setting-->github
1.搜索git,2.点击Create API Token,3.在弹出框输入github账号密码,
最后点击Test检测远程仓库是否连接成功。
也需要配置git安装路径,点击Test测试。
现在在桌面上鼠标右击,选中Git Bash
会弹出Git命令窗口:
1.本地git与github之间传输通过SSH加密,需要配置验证信息。使用 $ ssh-keygen -t rsa -C "xxx@xxx.com" 命令生成SSH key,一路回车,会创建id_rsa.pub文件,使用编辑器打开,复制全部内容;
打开我们的github连接,在个人中打开设置,选择SSH and GPG keys 选项,创建新的SSH key。
2.输入命令:$ ssh -T git@github.com 验证是否成功
3.首次运行该命令会出现提示信息,输入 yes 即可,看到成功信息,说明我们现在已经可以分享项目到github上了。
打开WebStorm,按如下操作。
等待右下角成功提示框
好了,到这里我们已经成功上传项目到github上,打开github仓库查看项目。
接下来开始开发Windows下的ReactNative项目吧。
ReactNative开发实战一之环境搭建(Windows下)相关推荐
- 最详细的JavaWeb开发基础之java环境搭建(Windows版)
首先欢迎大家来学习JavaWeb,在这里会给你比较详细的教程,从最基本的开始,循序渐进的深入.会让初学者的你少踩很多坑(大实话),如果你已经掌握了JavaWeb开发的基础部分,请耐心等待后续的进阶阶段 ...
- Java开发实战!java环境搭建是什么意思
前言 设计模式是我们编程道路上绕不开的一环,用好了设计模式能够让代码拥有良好的维护性.可读性以及扩展性,它仿佛就是"优雅"的代名词,各个框架和库也都能见到它的身影. 正是因为它有种 ...
- 搭建Windows下Android应用开发环境——Eclipse/Android/ADT
搭建Windows下Android应用开发环境--Eclipse/Android/ADT 田海立@CSDN 2011/07/18 Window下Android的应用开发环境,很早以前就在我的机器上搭建 ...
- Java开发环境搭建:Windows
Java开发环境搭建:Windows JDK下载安装 JDK下载 设置环境变量 测试是否安装成功 开发工具下载安装:Idea Idea下载 Idea安装 Idea开发JAVA 推荐一波 JDK下载安装 ...
- 企业实战(2) 项目环境搭建之Tomcat部署
前言: Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说, ...
- KPI考核系统实战之一:环境搭建
KPI考核系统实战之一:环境搭建 一.开发工具选择 二.整体环境搭建,使用开发技术 一.开发工具选择 使用号称宇宙第一IDE的Visual Studio,目前最新版本2022,发现有社区版.企业版等区 ...
- 使用Eclipse JEE+Mtj+Nokia S60 V3SDK开发J2ME应用的环境搭建
使用Eclipse JEE+Mtj+Nokia S60 V3SDK开发J2ME应用的环境搭建 2010-04-07 16:53 在Nokia S60 V3下进行J2ME应用程序开发,需要搭建 Noki ...
- 3D打印软件Cura的二次开发(GUI)--环境搭建
3D打印软件Cura的二次开发(GUI)--环境搭建 软体动物Ai 关注 2016.07.06 12:36* 字数 1639 阅读 1300 评论 8 喜欢 4 本文采用中国大陆版CC协议发布 ...
- WCF开发实战系列四:使用Windows服务发布WCF服务
WCF开发实战系列四:使用Windows服务发布WCF服务 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 上一篇文章中我们通过编写的控制台程序或WinForm程序来为本 ...
最新文章
- Window 窗口层次关系
- python读取只读word只读_人生苦短我学Python——Word处理之快速Word转PDF
- openStreetMap学习网站
- sonar findbugs plugin源码研究
- 为什么需要这么多编程语言?
- list最大容量_Java 基础(四)集合源码解析 List
- MongoDB中的变更通知
- Core Data的使用(二)备
- 因服务器配置不当,热门直播平台 Twitch 的125GB 数据和源代码被泄露
- Oracle删除重复记录三种方法
- linux出现bash: ./java: cannot execute binary file 问题的解决办法
- leach算法 matlab,求助LEACH的MATLAB仿真代码
- Axure8.1.0.3389 授权码
- wireshark 报文分析心得 -- Identification 使用说明
- 交通流量预测数据集解读
- 列表页进入详情页再返回列表页时,显示默认第一页的bug修复
- 【正则】包含大写小写字母数字的8到16位的密码正则
- 啥也不懂,实现Deepin系统如何有效安装TL-WDN5200H v2.0 linux驱动,自测成功
- Cookie--防劫持的处理
- 免费手机号码归属地API查询接口
热门文章
- 【dockerregistry】关于docker login的镜像仓库登录凭证
- 项目管理逻辑:项目如何算是做完?什么是项目管理中的PPP模式?
- Win10不能直接拖动文件打开的解决办法
- UML关系-继承和泛化的区别
- sql中字段入库超长
- Android Receiver(听筒模式和扬声器模式,铃音模式)
- 【Unity3D-UGUI应用篇】(四)使用UGUI弹窗显示模型及弹窗模型交互
- 社会保障卡与应届生/工作人员/失业人员的爱恨情仇
- 古有书山“勤”为径,现今升职加薪何为“径”?
- 来香港一年的感悟与随笔