第二节 显示页面标题

# 代码
项目刚创建的时候,只有一个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‘的导入。

时间: 2024-10-12 20:14:13

第二节 显示页面标题的相关文章

2014年度辛星html教程夏季版第二节

上面一节中我们介绍了HTML文件的书写和几个标签,接下来我们来认识几个其他的标签,这里我们主要介绍一下head标签和文本标签. ***************head标签************************ 1.所谓head,就是头的意思,它可以包含若干子标签,它的内容是不会再浏览器的文本区域显示的,但是它的作用非常广泛,下面我们重点介绍一下它的子标签. 2.head标签可以包含title标签,上面我们已经看到了,而title标签就是在浏览器的标题栏显示的内容,这点我们上节说了. 3

SEO页面标题Title的优化

我在一个月前改过页面标题(Title),随后表现是:百度网页快照4天不更新,Google正常.而我仅仅是改了两个词组而已.在建博初期,修改Title的最频繁的时期,下面卢松松就我经历的修改Title过程给大家提供一些经验. 标题是网页优化最重要的因素,页面标题Title相当于赋予一个网页一些内容,它告诉搜索引擎蜘蛛此页面是关于什么的.所以任何一个网页Title的重要性是最高的,远远超过keyword和description. 1:如何保证Title不重复 这个问题很难解决,包括很多专门研究SEO

【读书笔记】《鸟哥Linux私房菜-基础知识篇》第二节 基础命令

第二节 基础命令 uname –r 查询Linux核心版本. 装置及装置在Linux内的文件名 IDE硬盘机 /dev/hd[a-d] SCSI/SATA/USB硬盘机 /dev/sd[a-p] USB快闪碟 /dev/sd[a-p] 软盘驱动器 /dev/fd[0-1] 打印机 25针:/dev/lp[0-2] USB:/dev/usb/lp[0-15] 鼠标 USB:/dev/usb/mouse[0-15] PS2:/dev/psaux 当前CDROM/DVDROM /dev/cdrom 当

杨森翔:春节文化大观上编 第三章 春节古诗词 目录 第一节:春节诗词概述 一、 除夕诗词概述 二、元日诗词概述 三、 元宵诗词概述 第二节:春节古诗词拾萃

杨森翔:春节文化大观上编 第三章 春节古诗词 目录 第一节:春节诗词概述 一. 除夕诗词概述 二.元日诗词概述 三. 元宵诗词概述 第二节:春节古诗词拾萃 一.腊祭诗词 二.祭灶诗词 三.除夕诗词 四.元旦诗词 五.人日诗词 六.元宵诗词 第一节:春节古诗词概述 中国的春节,作为除旧迎新的节日,时间相当长,从年前的腊月二十三,天空中就似乎弥漫了节日的气息.这种节日的气氛,在保持传统风俗较好的地方,甚至会持续到二月二龙抬头的时候,但欢度春节的高潮,应该说是自除夕始一直到上元之夜.因此,历代歌咏和反

Bootstrap 分页、标签、徽章、超大屏幕、页面标题

分页(pagination), 是一种无序列表 1.默认的分页(.pagination) 代码示例: 1 <ul class="pagination"> 2 <li><a href="#">«</a></li> 3 <li><a href="#">1</a></li> 4 <li><a href="#"

centos单用户 救援 运行级别 第二节课

centos单用户 救援 运行级别 第二节课 yum工具在minimal安装级别就已经安装 yum list:列出远程服务器端的所有的包的列表 安装桌面套件,安装图形化桌面 yum groupinstall -y "desktop"yum groupinstall -y "X window system" 临时显示英文 LANG=en

dede 鼠标移到标题处显示完整标题

有些标题过长,为了页面的美观,会对标题的长度进行控制,会截断一些. 给标题加上title属性就能让读者把鼠标移到标题上就能显示完整标题了. 之前我也注意到要把title给添加上,用的是以下这种方式. <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a> 但是生成的时候,title里面的标题还是会别截断,换成title="[field:fulltitle

显示文章标题, 发帖人、 最后回复时间

-- 创建表 DROP TABLE IF EXISTS articles; CREATE TABLE articles( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(50), postuser VARCHAR(10), articles postdate DATETIME, parentid INT REFERENCES articles(id) ); -- 插入数据库 INSERT INTO articles VALUES (NULL,'第

第二节 Java Swing中的基本容器:JFrame

第二节 基本容器:JFrame 如果要使用Swing创建一个窗口,则直接使用JFrame即可,此类事Component类的子类,常用方法如下: 小试牛刀 创建一个简单的窗口 import java.awt.*; import java.io.*; import javax.swing.*; public class JavaSwingTest { public static void main(String args[]) throws IOException{ test1(); } //创建一