昨天RN整个环境以及第一个APP已成功运行到手机上,但是这个过程作为程序员自己竟然一行代码也没写,也没啥值得高兴哈。今天就开始进行上手改改代码,了解了解其语法,接下来对学习过程的步骤也做一个记录,巩固一下自己学习到的知识。
虽然想写一写RN运行的原理,从代码加载到android和RN的交互,但是作为一个初级入门的人,貌似有点难度而且很多细节也只是了解大概,所以这个文章就杂乱的记录一下这两天学习到的知识点。
初始化一个项目之后,(怎么初始化)它会自动生成一堆文件,大概如下
我们先不去一一识别每一个代表的意思,先学会如何用,再去说为什么这个用(请无视里面的各种图片,是我自己加上去测试的)。在初学阶段,我们关注的我们要关注的文件,就是下面两个文件:
我们需要更改的js代码初级阶段基本上全部在两个文件中,一个是android、一个是iOS,它根据要运行的设备自动区分的。两个文件内容都是一样的
说到这,顺提一句,在有些博客中我们可以看到
varReact =require("react");
var{ Component, PropTypes} = React;//引用React抽象组件
varReactNative =require("react-native");
这样的写法,一开始我也很纳闷,为什么写法不一样呢,后来查阅资料才发现,这是因为Javascriptde的标准:ES5和ES6的两种不同写法,ES5也需要了解,然后拥抱ES6吧,毕竟系统初始化的代码也用了ES6。相关ES6和ES5的区别以及新特性,可以查阅一下地址,顺便也学习了如何定义变量,如何定义方法等等。
React Native 中 ES6+ 和 ES5 语法比较
为了了解记录这些,也是操碎了心呀~
回归上面的代码结构,
最上面是import,导入我们需要使用的组件或者类,我没有看到像Android一样有package的,在我使用到其他组件时,它自动导入的包如下:
import WelcomeText from "react-native/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android";(这是举个例子)
我猜测js没有包的说法,别的地方需要引用直接写明路径即可,即可以全局使用的。
接下来这句
每一个js继承Component,然后render渲染并返回一个虚拟dom,这也应该是为什么可以write once, run everywhere。render里面return各种View的组合,可以是Text、Image、List以及他们的组合。
在接下来
定义需要使用到的样式,然后可以在布局文件中引用:
最后一句
AppRegistry.registerComponent('RNProject', () => RNProject);
这个才是JS 程序的入口。即把当前APP的对象注册到AppRegistry组件中, AppRegistry组件是js module。接着就等待Native事件驱动渲染JS端定义的APP组件。
这个就是我理解的js的过程,然后其他的简单介绍:
package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
Android的目录结构和我们接触的一样,没什么区别。
可以看到activity继承了ReactActivity,这里面应该涉及到了如何加载js,如何进行数据通信,在这就不过多介绍,其实我也不太懂,感觉需要满满的掌握其中的写法、用法,然后有一天就会突然间融会贯通,知道如何使用了~
今天晚上老婆大人约撸串,就写到这,下次总结一下对于定义变量、定义方法、以及数据加载的实践。