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框架myJSFrame附API使用帮助
Jun 28 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
详解Node.js如何处理ES6模块
May 15 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
网站当前的在线人数
2006/10/09 PHP
php实现webservice实例
2014/11/06 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
暑期实习鉴定
2013/12/16 职场文书
对教师的评语
2014/04/28 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
七年级思品教学反思
2016/02/20 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js