前篇已介紹了 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 的構成最基本的元素組件開始，快速介紹了組件的屬性、狀態和如何定義樣式。下一篇要開始準備動手做一個小的應用程序。
