React Native 环境搭建的教程


Posted in Javascript onAugust 19, 2017

一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用。第一步从环境搭建开始。

环境搭建

分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了

$ brew install node

$ brew install watchman

$ brew install yarn

$ npm install -g react-native-cli

$ npm install -g react-devtools   // debug工具,可选

创建应用

只要运行下面的命令就可以创建一个名为 AwesomeProject 的 RN 项目

react-native init AwesomeProject

也可以指定使用 RN 版本号,

react-native init AwesomeProject --version 0.47.0

该命令会创建一个 package.json 的文件,就是 npm 管理依赖的文件。这个文件中需要特别注意,在 dependencies 中申明的 react 和 RN 的版本一定要配对。有一次生成后的项目运行总是报错,百思不得其解,最后才发现是版本不匹配造成的。只能默默修改版本号,然后运行 npm install 才得以解决

{

 "name": "AwesomeProejct",

 "version": "1.0.0"

 "private": true,

 "scripts": {

  "start": "node node_module/react-native/local-cli/cli.js start"

 },

 "dependencies": {

//  "react": "^15.6.1", // was installed by npm but not matched

  "react": "^16.0.0-alpha.12", // correct dependency version for react

  "react-native": "^0.47.0"

 }

}

除了依赖管理文件以外,还有 ios 和 android 两个目录用来存放原生代码,以及一些初始化的 JavaScript 文件模板,以后会用到,就不一一列举了。

初次运行

初次运行是用来检查环境是否正确的简单的反馈,根据平台运行下列命令

$ react-native run-ios
or
$ react-native run-android

Android 需要事先启动模拟器或者连接真机,iOS 会自动启动模拟器。如果看到下面这个界面,恭喜你已经完成了环境的搭建,就可以开始应用层的开发了。

React Native 环境搭建的教程

RN First Launch

启动过程

到此结束也是可以的,但是还有一个问题需要解释一下,以便之后能够快速进入 RN 应用开发。如上节提到的启动命令,可以分解成两步。

步骤1. 启动服务器

一个步骤是启动开发服务器,它是用来提供运行所需的 JavaScript 文件的,当然也可以用下面的命令单独启动

npm start

服务会占用本地的8081端口,如果该端口被占用,需要依次运行下面两个命令来结束占用端口的进程

$ sudo lsof -i :8081
$ kill -9 <PID>

步骤2. 启动移动端

另一个步骤就是编译移动原生代码并安装运行,和平时开发原生移动应用是一样的。也可以到平台各自的目录下,ios或者android,用 IDE 打开并编译运行。

启动完成并看到上面的截图的界面,就不用反复编译和启动移动端程序,每次代码修改只需在模拟器中按提示刷新即可看到修改内容。因为 RN 的主要的逻辑代码在服务器端的 JavaScript 中,就是说每次刷新都会拉取服务器上的最新代码并重新渲染用户界面。

当然,目前提到的整个过程仅指在开发阶段,生产环境中可以更自由, JavaScript 文件的存放可以在服务器和客户端之间进行选择。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 #Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 #Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
You might like
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
Symfony核心类概述
2016/03/17 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
基于python requests库中的代理实例讲解
2018/05/07 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
益达广告词
2014/03/14 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
入党介绍人评语
2014/05/06 职场文书
求职信名称怎么写
2014/05/26 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
个人先进事迹总结
2015/02/26 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
爱国之歌(8首)
2019/09/29 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python