你的位置:首页 > 操作系统

[操作系统]第二节 显示页面标题



# 代码
项目刚创建的时候,只有一个js文件,index.android.js,我们将其简化一下,代码如下:

import React, {
AppRegistry,
Component,
Text} from 'react-native';

class Note extends Component{
render(){
return (
<Text>
写笔记
</Text>
);
};
};
AppRegistry.registerComponent('note', () => Note);

# React Native程序执行过程
1. index.android.js是入口文件,从这里开始执行。
2. 由于React是组件化的,我们首先要创建一个根组件,这里是Note
3. 我们需要注册根组件
4. 程序启动后,首先显示根组件,这里简单的在屏幕左上方显示"写笔记"

# Es2015的模块系统
import React, {
AppRegistry,
Component,
Text} from 'react-native';
这部分的作用,是导入react-native包的一些功能,这里React是默认导入,只能有一个,其它大括号里的,可能是
类、函数和变量,只要我们用到了,这里就要预先导入。
我们要在js文件里调用其它模块提供的功能,就必须先import它们。

# React的组件概念
class Note extends Component{

这是创建一个组件,继承自Component,实现render函数。
我们创建了这个组件,今后在jsx中就可以用<Note> </Note>这类方式使用该组件,和使用react native封装的
<Text>组件没什么不同,这就是为何说React是组件化的原因。
简单的描述下React概念:React的第一个核心概念是虚拟Dom,无论何种平台该虚拟Dom都抽象了界面的层次结构、
每个组件的属性和状态。状态发生变化时,React比较与前面状态的差异,然后仅仅Render需要修改的部分,不需全部重
绘。React是Web技术,已经将React-Dom分离出来,后者是将html的标签组件化、Render,而反过来,React Native
则仅封装android和ios相关的组件,因此React的核心架构,再实现了一套组件的Render后,就能工作在移动平台。
同样的道理,若我们在win32平台,使用window api实现组件的render,这种技术同样可以用于桌面开发,且是原生的、使用
js的windows应用。目前已经有第三方实现了mac上的Render.


# JSX
这个组件只实现了Render函数,就能够正常工作,该函数的作用是,将自己呈现出来
函数体返回的内容,是jsx语法,这种语法最简单的形式:
<Text>
写笔记
</Text>

为什么是简化的写法呢?因为React原始的写法是这样的
render(){
return (
React.createElement('Text', null,'写笔记')
)}
createElement最后一个参数,还可能就绪嵌套调用createElement,这样代码十分紊乱。
因此facebook提供了jsx语

法,在运行前,将其转换成createElement这样的形式。

# 注册根组件:
AppRegistry.registerComponent('note', () => Note);
React Native提供AppRegistry,用于注册第一个呈现的组件,称为根组件。
其参数中,第一个是名字,第二个()=>Note是Es2015的双箭头函数,类似其它语言中的lambda函数,
等同于func(return Note);如果有一个或多个参数,在括号中处理.
Note,是一个类,这里的写法实际上创建了Note类的一个实例,调用了Note类的构造方法

# 分离出单独的Note组件:
一般项目,不会只有一个源文件。
我们创建src目录,在其中创建一个note.js的文件,然后将这里的组件移植过去。加上必要的引用,为组件类
加上默认导出:export default.
在index.android.js里删掉该组件相关的代码和导入,增加对'.\src\note'的导入。