React Native 【学习总结】-【常用命令】

前言

刚接触RN，相信很多人无从下手，不知道下一步要干什么，能干什么，本次学习围绕这个问题，将RN的常用命令总结一下，帮助你快速上手

架构理解

光知道命令的作用，远远不够，如果知道命令背后的意义，才能运用自如，不惧困难，下面先理解下RN的架构，请看图

 

架构图

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

 

JSX

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