前篇已介绍了 RN 的环境搭建，作为第二篇，介绍 RN 的基础知识为后续打下基础。接着上一篇，接下来的示例代码可以在之前留下的代码上直接修改并运行。
好了，切入正题。RN 如果需要在软件架构上进行分类的话，我会把它归到界面显示框架。原因是
- RN 面向的移动端开发；
- RN 主要负责界面元素的搭建；
- 虽然可以使用 JavaScript 逻辑代码，其用途还是为了数据转换，便于控件的显示或者数据绑定。
那么一个界面显示框架需要解决怎样的问题呢？界面搭建、数据绑定、后端交互。之后再来交代后端交互，先来看一下前两个。界面的搭建再拆分为UI控件与样式。RN 中的控件被定义为组件 Component，样式则是借鉴了 HTML 中的层叠样式表 CSS。数据绑定是通过属性和状态来完成的。接下来逐一介绍它们。
组件
RN 应用是基于组件 Component 的集合，开发可以通过组件间有目的的排列与组合来完成整个应用。何为组件？直接或者间接扩展了 Component 对象的都属于组件。组件必须具备有一个关键方法 render() ，正如这个方法名字暗示的一样，它是用来渲染界面的。为何关键呢？组件的职责就是负责绘制界面。下面的例子中，定义了一个叫做 HelloWorldApp 的组件，在其 render() 方法返回 <Text>。 <Text> 是 RN 预先定义用来显示文本的基础组件。这样一个自定义组件就写好了。
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
属性
了解网页开发的人应该非常熟悉 HTML 语言中每个标签都有一些属性，就像 A 标签会有 href 属性来表示需要重定向的地址。在 RN 中也是一样，每个组件可以写成类似 HTML 的标签，就像之前例子中的 <Text>。下面的例子是 RN 中用来显示图片的组件，与 HTML 的 <img> 标签不同的是，图片地址是用 source 属性来指定的。
<Image source={pic} style={{width: 193, height: 110}} />
比 HTML 标签更强大的是，RN 组件的属性是可以自定义的。属性用来表示常量，如预先知道的图片地址，需要显示的大小等等，也就是说在定义清楚以后，组件生命周期中是不会改变的。问题来的，在编程中除了常量还有变量，那么变量该如何处理呢？如果显示的图片需要在运行时发生改变怎么办？接下来要介绍的状态就是用来处理此类情况的。
状态
状态本身很好理解，即物质系统所处的状况，如形状、温度、颜色，一般可以使用物理量来表示。用在控件上就是指某个时间段内控件的显示情况，这个情况可能随着用户的操作或者时间发生改变。下面的例子中定义了一个组件，其中显示的文本可以被隐藏。注意它的构造器，定义了一个状态 showText，用以标记是否显示文本。然后在 render() 方法中使用，先判断状态是否要显示文本，需要则直接显示 text 属性，否则就用空字符串替换掉。
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
查看组件中的状态是如何工作的，需要响应用户的操作或者编写一个时间函数改变 showText 属性。下面就来修改构造函数，添加注释之后的语句，刷新一下看看效果。
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
样式
RN 的样式与网页开发中使用的层叠样式表类似，有两种定义方式，可以直接在组件的 style 属性中定义。下面的例子中，定义了一个背景色是红色，高和宽都是50的文本。
<Text style={{width:50, height:50, backgroundColor: 'f00'}}></Text>
第二种方式像独立的 CSS 申明一样，可以在各组件间重复使用。
<Text style={styles.redtext}></Text>
const styles = StyleSheet.create({
redtext: {
color: '#f00',
width: 50,
height: 50,
},
});
总结
这篇从 RN 的构成最基本的元素组件开始，快速介绍了组件的属性、状态和如何定义样式。下一篇要开始准备动手做一个小的应用程序。
