React Native（四）：佈局（使用Flexbox）
歡迎一起來學習React Native，QQ群：672509442
簡介
我們在React Native中使用flexbox規則來指定某個元件的子元素的佈局。Flexbox可以在不同螢幕尺寸上提供一致的佈局結構。相對於Native開發的佈局更加快捷方便。
Flexbox使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經能滿足大多數佈局需求
flexDirection
flexDirection可以決定zu jian元件佈局的主軸，子元素會沿著主軸排列，或水平或垂直。
flexDirection的預設值是豎直軸（column）方向
column（預設）
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View 
column-reverse
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View 
row
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
row-reverse
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, flexDirection: 'row-reverse'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
justifyContent
在元件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應該靠近主軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end、space-around以及space-between。
flex-start
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'flex-start'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
center
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
flex-end
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'flex-end'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
space-around
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
space-between
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column',justifyContent: 'space-between'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
alignItems
在元件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式。子元素是應該靠近次軸的起始端還是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end以及stretch。
flex-start
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
center
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
flex-end
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'green'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
stretch
注意：
要使stretch選項生效的話，子元素在次軸方向上不能有固定的尺寸。以下面的程式碼為例：只有將子元素樣式中的width: 50去掉之後，alignItems: ‘stretch’才能生效。
export default class AsomeProject extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch'}}>
<View style={{height: 50, backgroundColor: 'red'}} />
<View style={{height: 150, backgroundColor: 'green'}} />
<View style={{height: 100, backgroundColor: 'blue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AsomeProject', () => AsomeProject);
歡迎一起來學習React Native，QQ群：672509442
相關推薦
React Native（四）：佈局（使用Flexbox）
歡迎一起來學習React Native，QQ群：672509442 簡介 我們在React Native中使用flexbox規則來指定某個元件的子元素的佈局。Flexbox可以在不同螢幕尺寸上提供一致的佈局結構。相對於Native開發的佈局更加
React Native基礎&入門教程：初步使用Flexbox佈局
在本篇裡，讓我們一起來了解一下，什麼是Flexbox佈局，以及如何使用。 一、長度的單位 在開始任何佈局之前，讓我們來首先需要知道，在寫React Native元件樣式時，長度的不帶單位的，它表示“與裝置畫素密度無關的邏輯畫素點”。 這個怎麼理解呢？ 我們知道，螢幕上一個發光的最小點，對應著一
React Native探索（二）：佈局篇
可以看到iphone 6的寬度為 375pt，對應了上邊的375，由此可見react的單位為pt。 那如何獲取實際的畫素尺寸呢？ 這對圖片的高清化很重要，如果我的圖片大小為100*100 px. 設定寬度為100 * 100. 那在iphone上的尺寸就是模糊的。 這個時候需要的影象大小應該是 100 *
WebStorm上執行react-native報錯 Error： Metro Bundler can't listen on port 8081（Win7）的解決
Win7環境 + WebStorm + react-native專案，點選執行按鈕然後未在Genymotion模擬器上執行程式，WebStorm工作臺輸出下列錯誤： Error： Metro Bundler can't listen on port 8081 產生原因
C語言中存儲類別又分為四類：自動（auto）、靜態（static）、寄存器的（register）和外部的（extern）。
字符變量 修飾 例如 register ext 進行 適合 sta -- 除法運算中註意： 如果相除的兩個數都是整數的話，則結果也為整數，小數部分省略，如8/3 = 2；而兩數中有一個為小數，結果則為小數，如：9.0/2 = 4.500000。 取余運算中註意： 該運算只適
IntelliJ IDEA（四） ：Settings（上）
socket size mage 存儲策略 策略 emp per http協議 通知 轉載： 作者：JaJian 出處：http://www.cnblogs.com/jajian/ 前言 IDEA是一個智能開發工具，每個開發者的使用習慣不同，如何個性化自己的IDE
史上最簡單的SpringCloud教程 ｜ 第四篇：斷路器（Hystrix）
技術分享 熔斷器 enable layer get local nsh 12c host 在微服務架構中，根據業務來拆分成一個個的服務，服務與服務之間可以相互調用（RPC），在Spring Cloud可以用RestTemplate+Ribbon和Feign來調用。為了保證
史上最簡單的SpringCloud教程 ｜ 第四篇：斷路器（Hystrix）(Finchley版本)
stat api serve 依賴 網頁 固定 lock 不能 mar 在微服務架構中，根據業務來拆分成一個個的服務，服務與服務之間可以相互調用（RPC），在Spring Cloud可以用RestTemplate+Ribbon和Feign來調用。為了保證其高可用，單個服務
《生命》第四集：Fish （魚類）
旗魚，是遊動最快的魚，他們不僅速度快，背上的魚鰭還能嚇唬成群的沙丁魚，他們依靠速度與技巧結隊捕食。 飛魚，繼續講述了一下，飛魚可以飛起來，把捕食者遠遠甩掉；飛魚保護後代的方式是把卵產在水中的樹葉上，很多卵導致樹葉下沉，提升孵化率。 澳大利亞南部的淺水區，海藻龍交配之前，需要雄性一模一樣模仿雌性
javaweb學習筆記（十四）：JSP（4）
目錄 製作高仿的JSTL標籤庫之核心標籤庫 《1》xiaohua.tld檔案： 《2》依附的各個類： 《3》imitate.core.jsp檔案： 《4》瀏覽器檢視： 製作高仿的JSTL標籤庫之核心標籤庫 通過自定義標籤，製
Java：去除List集合中的重複值（四種好用的方法）
最近專案中需要對list集合中的重複值進行處理，大部分是採用兩種方法，一種是用遍歷list集合判斷後賦給另一個list集合，一種是用賦給set集合再返回給list集合。 但是賦給set集合後，由於set集合是無序的，原先的順序就打亂了。所以我又想著能不能用set的特性進行去重又不打亂順序
【linux】Valgrind工具集詳解（十四）：Cachegrind（快取和分支預測分析器）
一、概述 Cachegrind，它模擬CPU中的一級快取I1，Dl和二級快取，能夠精確地指出程式中cache的丟失和命中。如果需要，它還能夠為我們提供cache丟失次數，記憶體引用次數，以及每行程式碼，每個函式，每個模組，整個程式產生的指令數。這對優化程式有很大的幫助。 Cach
python手記（四）：pillow（一）GIF處理，RGBA處理，Image例項屬性總結
GIF儲存方法： 上次我們說到了gif動態圖片怎樣一張張將它分解，這次我們來說下怎樣把幾張單的gif組合成動態圖片。 im.save(out, save_all = True, append_images=[im1, im2......]) 基本的方法就
react-native-swiper設定高度的方法（設定rn輪播圖所佔高度）
效果圖： 直接上解決方案： 1、在Swiper標籤外套一層View <View style={styles.container}> <Sw
微信小程式填坑之路（三）：佈局適配方案（rpx、px、vw、vh）
因為小程式是以微信為平臺執行的，可以同時執行在android與ios的裝置上，所以不可避免的會遇到佈局適配問題，特別是在iphone5上，因為螢幕尺寸小的緣故，也是適配問題最多的機型，下面就簡單介紹幾種適配方法。 rpx適配 rpx是小程式中
Java容器（四）：HashMap（Java 7）的實現原理
一、HashMap的定義和建構函式 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, S
python手記（四）：pillow（五）最後一篇：過濾器，截圖。
人生不易且無趣，一起找點樂子吧。歡迎評論，和文章無關也可以。 這篇就當pillow的最後一篇好了，後面的模組沒有前面的有趣，主要是一些細節上的處理，例如圖片的文字啊，文字的型別啊。 無非就是告訴你很多東西都可以自定義，建立你自己的個性
python手記（四）：pillow（四） ImageDraw模組 圖片繪製
人生不易且無趣，一起來找點樂子吧。歡迎評論，和文章無關的也可以。 這次說下ImageDraw module，其實從名字上就可以看出來，這個模組的功能是什麼。就是在圖片上繪製一些東西，比如文字，簡單圖形啊什麼的。 下面我們就來看看模組下
python手記（四）：pillow（三） ImageColor模組
人生不易且無趣，一起找點樂子吧。歡迎評論，很文章無關也可以。 上次說到ImageChops模組，這次說下IamgeColor。（先把上篇欠的圖補上）上篇的末尾提到《星月夜》的補圖，烏雲的補圖。又鑑於這次的文章沒啥視覺衝擊。把這兩張圖放出來
python手記（四）：pillow（二） ImageChops類 視覺衝擊
人生不易且無趣，一起找點樂子吧。歡迎評論，和文章無關的也可以。 咳咳（清下嗓子，準備發話），自娛自樂型人格分裂患者。haaa。 前面我們簡單看了pillow的基礎Image類。現在我們成功的過度了，進入下個地圖，刷怪，升級。反正都是一