前篇已介紹了 RN 的環(huán)境搭建，作為第二篇沥阱，介紹 RN 的基礎(chǔ)知識(shí)為后續(xù)打下基礎(chǔ)泣崩。接著上一篇，接下來的示例代碼可以在之前留下的代碼上直接修改并運(yùn)行等孵。
好了稚照，切入正題。RN 如果需要在軟件架構(gòu)上進(jìn)行分類的話俯萌，我會(huì)把它歸到界面顯示框架果录。原因是
- RN 面向的移動(dòng)端開發(fā)；
- RN 主要負(fù)責(zé)界面元素的搭建咐熙；
- 雖然可以使用 JavaScript 邏輯代碼弱恒，其用途還是為了數(shù)據(jù)轉(zhuǎn)換，便于控件的顯示或者數(shù)據(jù)綁定。
那么一個(gè)界面顯示框架需要解決怎樣的問題呢？界面搭建文黎、數(shù)據(jù)綁定湿滓、后端交互锥惋。之后再來交代后端交互做鹰，先來看一下前兩個(gè)僧鲁。界面的搭建再拆分為UI控件與樣式伤柄。RN 中的控件被定義為組件 Component并扇，樣式則是借鑒了 HTML 中的層疊樣式表 CSS去团。數(shù)據(jù)綁定是通過屬性和狀態(tài)來完成的。接下來逐一介紹它們穷蛹。
組件
RN 應(yīng)用是基于組件 Component 的集合土陪，開發(fā)可以通過組件間有目的的排列與組合來完成整個(gè)應(yīng)用。何為組件肴熏？直接或者間接擴(kuò)展了 Component 對(duì)象的都屬于組件鬼雀。組件必須具備有一個(gè)關(guān)鍵方法 render() ，正如這個(gè)方法名字暗示的一樣蛙吏，它是用來渲染界面的源哩。為何關(guān)鍵呢？組件的職責(zé)就是負(fù)責(zé)繪制界面鸦做。下面的例子中励烦，定義了一個(gè)叫做 HelloWorldApp 的組件，在其 render() 方法返回 <Text>泼诱。 <Text> 是 RN 預(yù)先定義用來顯示文本的基礎(chǔ)組件坛掠。這樣一個(gè)自定義組件就寫好了。
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
屬性
了解網(wǎng)頁(yè)開發(fā)的人應(yīng)該非常熟悉 HTML 語言中每個(gè)標(biāo)簽都有一些屬性治筒，就像 A 標(biāo)簽會(huì)有 href 屬性來表示需要重定向的地址屉栓。在 RN 中也是一樣，每個(gè)組件可以寫成類似 HTML 的標(biāo)簽矢炼，就像之前例子中的 <Text>系瓢。下面的例子是 RN 中用來顯示圖片的組件，與 HTML 的 <img> 標(biāo)簽不同的是句灌，圖片地址是用 source 屬性來指定的夷陋。
<Image source={pic} style={{width: 193, height: 110}} />
比 HTML 標(biāo)簽更強(qiáng)大的是，RN 組件的屬性是可以自定義的胰锌。屬性用來表示常量骗绕，如預(yù)先知道的圖片地址，需要顯示的大小等等资昧，也就是說在定義清楚以后酬土，組件生命周期中是不會(huì)改變的。問題來的格带，在編程中除了常量還有變量撤缴，那么變量該如何處理呢刹枉？如果顯示的圖片需要在運(yùn)行時(shí)發(fā)生改變?cè)趺崔k？接下來要介紹的狀態(tài)就是用來處理此類情況的屈呕。
狀態(tài)
狀態(tài)本身很好理解微宝，即物質(zhì)系統(tǒng)所處的狀況，如形狀虎眨、溫度蟋软、顏色，一般可以使用物理量來表示嗽桩。用在控件上就是指某個(gè)時(shí)間段內(nèi)控件的顯示情況岳守，這個(gè)情況可能隨著用戶的操作或者時(shí)間發(fā)生改變。下面的例子中定義了一個(gè)組件碌冶，其中顯示的文本可以被隱藏湿痢。注意它的構(gòu)造器，定義了一個(gè)狀態(tài) showText扑庞，用以標(biāo)記是否顯示文本蒙袍。然后在 render() 方法中使用，先判斷狀態(tài)是否要顯示文本嫩挤，需要?jiǎng)t直接顯示 text 屬性，否則就用空字符串替換掉消恍。
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
}
render() {
// 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
查看組件中的狀態(tài)是如何工作的岂昭，需要響應(yīng)用戶的操作或者編寫一個(gè)時(shí)間函數(shù)改變 showText 屬性。下面就來修改構(gòu)造函數(shù)狠怨，添加注釋之后的語句约啊，刷新一下看看效果。
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
樣式
RN 的樣式與網(wǎng)頁(yè)開發(fā)中使用的層疊樣式表類似佣赖，有兩種定義方式恰矩，可以直接在組件的 style 屬性中定義。下面的例子中憎蛤，定義了一個(gè)背景色是紅色外傅，高和寬都是50的文本。
<Text style={{width:50, height:50, backgroundColor: 'f00'}}></Text>
第二種方式像獨(dú)立的 CSS 申明一樣俩檬，可以在各組件間重復(fù)使用萎胰。
<Text style={styles.redtext}></Text>
const styles = StyleSheet.create({
redtext: {
color: '#f00',
width: 50,
height: 50,
},
});
總結(jié)
這篇從 RN 的構(gòu)成最基本的元素組件開始，快速介紹了組件的屬性棚辽、狀態(tài)和如何定義樣式技竟。下一篇要開始準(zhǔn)備動(dòng)手做一個(gè)小的應(yīng)用程序。
