前言
刚接触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原理的理解来解读命令,知道命令背后做的工作,就能很容易的记住,这种方式在学习过程中有助于理解。希望对你有帮助。