React-Native 之控制項布局

來源:互聯網
上載者:User

標籤:

  Nodejs 一度將前端JS 推到了伺服器端,而15年FB的React-Native RN再一次將JS 推到了移動端的開發浪潮中。RN的優勢這裡不再重複,它是我們這些習慣了服務端、web端開發,而又不想去花太多時間掌握Android、IOS移動端原生開發的人員的福音,可以說是我們通向全棧工程師的快速捷徑!於是乎最近開始學習React-Native,並將學習中的一些點滴記錄下來。

  網上關於RN的資料不少了,首先是環境配置,不一定非得Mac 下。我是基於Windows開發的,Windows下環境如何配置大家可以參考這篇文章 Windows下RN環境搭配。準備好開發環境之後就是具體的開發知識學習了。首先是RN控制項的學習,這裡我們先學習RN的控制項布局。

  RN的布局採用的是CSS+Flexbox布局方式。我們初始化使用 命令初始化一個名叫reactNative的項目,命令如下:react-native init reactNative。等待完成之後,我們使用WebStorm開啟項目,在項目裡面的index.android.js檔案中插入如下代碼:

 1 import React, {Component} from ‘react‘; 2 import { 3     AppRegistry, 4     StyleSheet, 5     Text, 6     View 7 } from ‘react-native‘; 8  9 var App = React.createClass({10     render: function () {11         return (12             <View style={styles.main}>13                 <View style={styles.view1}>14                     <Text style={styles.text}>Test1</Text>15                     <Text style={styles.text}>Test2</Text>16                     <Text style={styles.text}>Test3</Text>17                 </View>18                 <View style={styles.view2}>19                     <Text style={styles.text}>Test4</Text>20                     <Text style={styles.text}>Test5</Text>21                     <Text style={styles.text}>Test6</Text>22                     <Text style={styles.text}>Test7</Text>23                     <Text style={styles.text}>Test8</Text>24                     <Text style={styles.text}>Test9</Text>25                     <Text style={styles.text}>Test10</Text>26                 </View>27             </View>28         );29     }30 })31 var styles = StyleSheet.create({32     main: {33         flex: 1, borderColor: ‘blue‘, margin: 5, borderWidth: 134     },35     view1: {36         borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘column‘, height: 15037     },38     view2: {39         borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘row‘40     },41     text: {42         fontSize: 14, margin: 1043     }44 })45 AppRegistry.registerComponent(‘reactNative‘, ()=>App);

   編輯完代碼之後,我們使用windows command 進入項目的目錄,然後使用命令:react-native start啟動項目,然後啟動模擬器,接著使用命令:react-native run-android。就可以在模擬器中看到如下效果!

 

 

這裡結合代碼,我們可以看出:最外層的View我們使用的是樣式style.main,採用的flex:1,borderColor:’blue’ 就是我們圖片中最外層的藍色邊框視圖。flex值大於0是表示控制項是可以伸縮的,由於沒有其他視圖和這裡的最外層View視圖競爭空間,因此它填充滿了我們這個手機螢幕。然后里面有2個子View視圖。

第一個視圖使用樣式style.view1 它的邊框是紅色,採用的flexDirection:’column’縱向伸縮,因此它裡面的三個Text控制項都是從上往下依次排列的。

第二個視圖使用樣式style.view2 它的邊框也是紅色,採用的flexDirection:’row’橫向伸縮,因此它裡面的7個Text控制項都是從左向右依次排列的。(最後一個Text超出了手機寬度邊界,未顯示完整。)

由此我們可以看出:在RN中flexbox的flexDirection有兩個字column和row預設為column值。當設定為column時控制項按照縱向依次排列布局,當設定為row時控制項按照橫向依次排列布局;

前面我們說了最外層的View設定flex=1是因為沒有其他控制項和它競爭空間,因此它填充滿了我們整個手機螢幕。這裡我們修改一下樣式表styles向其中添加幾個樣式,並將它們應用到View1中的3個Text中,修改代碼如下:

 1 var App = React.createClass({ 2     render: function () { 3         return ( 4             <View style={styles.main}> 5                 <View style={styles.view1}> 6                     <Text style={[styles.text,styles.row1]}>Test1</Text> 7                     <Text style={[styles.text,styles.row2]}>Test2</Text> 8                     <Text style={[styles.text,styles.row3]}>Test3</Text> 9                 </View>10                 <View style={styles.view2}>11                     <Text style={styles.text}>Test4</Text>12                     <Text style={styles.text}>Test5</Text>13                     <Text style={styles.text}>Test6</Text>14                     <Text style={styles.text}>Test7</Text>15                     <Text style={styles.text}>Test8</Text>16                     <Text style={styles.text}>Test9</Text>17                     <Text style={styles.text}>Test10</Text>18                 </View>19             </View>20         );21     }22 })23 var styles = StyleSheet.create({24     main: {25         flex: 1, borderColor: ‘blue‘, margin: 5, borderWidth: 126     },27     view1: {28         borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘column‘, height: 15029     },30     view2: {31         borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘row‘32     },33     text: {34         fontSize: 14, margin: 1035     },36     row1: {flex: 3},37     row2: {flex: 2},38     row3: {flex: 1}39 })

    這裡我們將View1中的三個Text控制項的flext值分別設定為3,2,1,然後我們在手機中看的效果如:我們可以看出三個Text控制項的高度分別為3:2:1佔滿了我們的View1的高度,這也證實了我們前面的結論。

   

  然後我們看一下alignSelf布局,alignSelf的對齊主要有四種:flex-start、 flex-end、 center、  auto、 stretch。我們添加如下代碼:

 

 1 <View style={styles.view3}> 2     <View  style={[styles.left,{width:100,height:40, borderWidth:1,borderColor:‘silver‘}]}><Text>left</Text></View> 3     <View   style={[styles.center,{width:100,height:40,borderWidth:1,borderColor:‘silver‘}]}><Text>center</Text></View> 4     <View  style={[styles.right,{width:100,height:40,borderWidth:1,borderColor:‘silver‘}]}><Text>right</Text></View> 5     <View style={[styles.default,{width:100, height:40,borderWidth:1,borderColor:‘silver‘}]}><Text>default</Text></View> 6 </View> 7  8 styles: 9 view3: {flex: 1, margin: 5, borderColor: ‘red‘, borderWidth: 1},10 left: {alignSelf: ‘flex-start‘},11 center: {alignSelf: ‘center‘},12 right: {alignSelf: ‘flex-end‘},13 default: {alignSelf: ‘auto‘},
可以看到如下的效果:

 

  然後還有alignItems、justifyContent它們分別是水平置中、垂直置中。它們的用法如下,我們添加如下代碼:

1 <View style={[styles.view3,{alignItems:‘center‘,justifyContent:‘center‘}]}>2     <View style={{width:120,height:30, borderWidth:1,borderColor:‘silver‘}}>3         <Text>水平垂直置中</Text>4     </View>5 </View>
運行之後可以看到如下效果:


以上就是RN的CSS和flexbox布局的簡單學習。

React-Native 之控制項布局

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.