React Native 【学习总结】-【常用命令】
前言
刚接触RN,相信很多人无从下手,不知道下一步要干什么,能干什么,本次学习围绕这个问题,将RN的常用命令总结一下,帮助你快速上手
架构理解
光知道命令的作用,远远不够,如果知道命令背后的意义,才能运用自如,不惧困难,下面先理解下RN的架构,请看图

最简单的解读就是,RN通过编写JS代码最终调用各系统原生API实现跨平台。看图知道最关键的部分是Bridge,Bridge是一种映射,将js代码映射成平台原生代码,并执行。
JSX:一种高级语法糖,可以在js代码中直接写HTML标签,如图

React UI Components : RN所有的UI组件,如图

一共就这么多,看名字是不是很熟悉。
React Module Components :除了官方的组件外,你可以引用第三方的任意组件。
Framework:还可以用第三方的库来提高开发效率,这是一个开发平台必不可少的一部分。
这里讲的不深,如果想深入理解,请看一下地址:
架构组件设计,应用架构设计,架构初探,架构分析,深入理解架构
常用命令
react-native init projectName
初始化RN项目,会创建新项目,并下载RN依赖,新增IOS,Android项目目录
react-native run-ios
构建IOS项目,做了两件事1.启动node服务2.执行xcode项目构建安装app到ios模拟器
react-native run-android
构建Android项目,同上:1.启动node服务,如果已启动则跳过2.执行studio gradle自动构建
项目构建整个过程就是RN架构原理的体现,首先将JS代码打包成bundle文件,放到node服务层,公开下载接口,安装到原生平台后,由Bridge层解析代码转成原生Api调用。这就是上面命令背后的事。
npm install --save-dev 库名
如果是生产环境的话 需要在–save后面加-dev,该命令实际是给RN添加第三方库,架构中属于React Module Components部分,在Android中就是新增引用的jar包。
react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/bundle/index.iosbundle.js --assets-dest ios/bundle
这个命令比较长,背后就干了一件事,将JS代码转成bundle,供原生平台下载,并解析渲染成UI
详细解释:
--entry-file ,ios或者android入口的js名称,比如index.ios.js
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称,比如./ios/bundle/index.ios.jsbundle
--assets-dest 图片以及其他资源存放的目录,比如./ios/bundle
react-native start / npm start
启动node服务,当你run-ios 或者Android项目的时候会执行这个命令。
总结
通过对整个RN原理的理解来解读命令,知道命令背后做的工作,就能很容易的记住,这种方式在学习过程中有助于理解。希望对你有帮助。
转自https://www.jianshu.com/p/bef4000e8934
React Native 【学习总结】-【常用命令】的更多相关文章
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- React Native 学习资料
React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/
- 一张图学习vim常用命令
一张图学习vim常用命令
- React Native 学习(三)之 FlexBox 布局
React Native 学习(三)之 FlexBox 布局
- goland学习-go常用命令使用
goland学习-go常用命令使用 1.跨平台编译:env GOOS=linux GOARCH=amd64 go build 2.获取go第三方包:go get -u github.com/go-sq ...
- iOS、swift、React Native学习常用的社区、论坛
<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- React Native学习(一) 环境搭建
需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm ...
随机推荐
- 这次的PION的总结
这次的PION的总结 果然不出所料,才\(129\)分. 同级的巨佬们\(170,180,\color {red}{280}\)\(\small{wc这什么神仙啊QAQ}\),都比我强 那我还有什么可 ...
- ABAP术语-URL
URL 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/20/1114193.html Uniform Resource Locator (U ...
- 【Linux】文件、目录权限及归属
访问权限: 可读(read):允许查看文件内容.显示目录列表 可写(write):允许修改文件内容,允许在目录中新建.移动.删除文件或子目录 可执行(execute):允许运行程序.切换目录 归属: ...
- python通过xlsxwriter模块将文字写入xlsx文件
#今天和大家一起学习通过python的xlsxwriter模块 xlsxwriter模块主要用来生成excel表格,插入数据.插入图标等表格操作等. 环境:python 3 1)安装 xlsxwrit ...
- JQuery简单总结(思维导图)
- vue---class和style的基本用法
不多BB了 直接上代码了 通俗移动易懂总结了5种常用改变样式 的形式 <style> .actived2{ color:red; } </style> </head> ...
- PHP读取excel表格,和导出表格
读取表格 public function excel(){ import("Common.Vendor.Excel.PHPExcel"); $filename="./fi ...
- spark or sparkstreaming的内存泄露问题?
关于sparkstreaming的无法正常产生数据---->到崩溃---->到数据读写极为缓慢(或块丢失?)问题 前两阶段请看我的博客:https://www.cnblogs.com/wa ...
- 监控生产线上服务器的docker容器及主机
1. 部署cadvisor容器,用来收集host上的容器信息,该容器部署在需要收集容器信息的每一个主机上部署: docker run -v /:/rootfs:ro -v /var/run:/var ...
- SQL 去重 显示第一条数据 显示一条数据
需求描述:根据某一个字段或几个字段去重来显示任一条数据,第一条或最后一条. 数据样式如下图: 尝试解决: --count(*)方法(只把条数为1条的显示出来了,超过1条全部过滤了) select * ...