前言

刚接触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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

如何利用Android Studio打包React Native APK知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。