第二节 显示页面标题,第二节页面标题金沙网址:

其次节 突显页面标题,第三节页面标题

# 代码

花色刚创建的时候,独有三个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. 先后运行后,首先显示根组件,这里差非常的少的在显示器左上方显示”写笔记”

# Es二零一六的模块系统
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,用于注册第几个人作品表现的零部件,称为根组件。

其参数中,第4个是名字,第三个()=>Note是Es二零一六的双箭头函数,类似别的语言中的lambda函数,
等同于func(return Note);假若有贰个或多少个参数,在括号中管理.

Note,是一个类,这里的写法实际上创设了Note类的三个实例,调用了Note类的构造方法

# 分离出单身的Note组件:
一般项目,不会独有三个源文件。

大家创设src目录,在内部创立贰个note.js的文本,然后将这里的零部件移植过去。加上须要的援用,为组件类
加上私下认可导出:export default.

在index.android.js里删掉该器件相关的代码和导入,增添对’.\src\note’的导入。

展现页面标题,首节页面标题 # 代码
项目刚创造的时候,唯有一个js文件,index.android.js,我们将其简化一下,代码如下:
import 库罗德…

相关文章