回頭看看RN的填坑之旅系列，發(fā)現(xiàn)一路寫下來(lái)都是我在開(kāi)發(fā)中遇到的問(wèn)題如何解決的。興之所至，不問(wèn)順序。于是出現(xiàn)一個(gè)問(wèn)題，填坑系列和學(xué)習(xí)知識(shí)的順序不是很一致。比如今天要說(shuō)的布局問(wèn)題。其實(shí)在一個(gè)app開(kāi)發(fā)之前，就應(yīng)該有所了解。否則的話每次看到的<View style={{flex: 1}} />代表的是什么呢？上來(lái)就是一個(gè)疑問(wèn)。
在這個(gè)系列進(jìn)行到一定程度的時(shí)候，我會(huì)花時(shí)間重新整理全系列的文章，讓各位可以按照知識(shí)本來(lái)學(xué)習(xí)的順序循序漸進(jìn)的學(xué)習(xí)React Native的知識(shí)，避免在開(kāi)發(fā)中遇到不應(yīng)該遇到的問(wèn)題。
正文開(kāi)始。本文主要是介紹基礎(chǔ)知識(shí)，但是不適用基礎(chǔ)的代碼。所以，如果你在看的時(shí)候有什么問(wèn)題弄不清楚的話，隨時(shí)查閱官網(wǎng)。那么問(wèn)題是什么？三個(gè)View放在一個(gè)父View里顯示出來(lái)會(huì)是設(shè)么樣子的？這五個(gè)子View每次只要顯示一個(gè)的話應(yīng)該如何處理？
首先我們先來(lái)一點(diǎn)開(kāi)胃小菜：
NavigationBar的布局
默認(rèn)的情況下NavigationBar的左側(cè)回退按鈕看起來(lái)是這樣的：
圖中可見(jiàn)，按鈕緊貼上沿。這個(gè)時(shí)候的布局是這樣的：
<TouchableHighlight
style={{backgroundColor: 'red', width: 50}} onPress={() => { if (index > 0) { navigator.pop(); } }}> <Text style