React-Native 之控件布局

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

　　網(wǎng)上關(guān)于RN的資料不少了，首先是環(huán)境配置，不一定非得Mac 下。我是基于Windows開發(fā)的，Windows下環(huán)境如何配置大家可以參考這篇文章 Windows下RN環(huán)境搭配。準備好開發(fā)環(huán)境之后就是具體的開發(fā)知識學習了。首先是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: 1
34     },
35     view1: {
36         borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150
37     },
38     view2: {
39         borderColor: 'red', borderWidth: 1, flexDirection: 'row'
40     },
41     text: {
42         fontSize: 14, margin: 10
43     }
44 })
45 AppRegistry.registerComponent('reactNative', ()=>App);

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

這里結(jié)合代碼，我們可以看出：最外層的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值。當設(shè)置為column時控件按照縱向依次排列布局，當設(shè)置為row時控件按照橫向依次排列布局；

前面我們說了最外層的View設(shè)置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: 1
26     },
27     view1: {
28         borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150
29     },
30     view2: {
31         borderColor: 'red', borderWidth: 1, flexDirection: 'row'
32     },
33     text: {
34         fontSize: 14, margin: 10
35     },
36     row1: {flex: 3},
37     row2: {flex: 2},
38     row3: {flex: 1}
39 })

　　這里我們將View1中的三個Text控件的flext值分別設(shè)置為3,2,1，然后我們在手機中看的效果如下圖：我們可以看出三個Text控件的高度分別為3:2:1占滿了我們的View1的高度，這也證實了我們前面的結(jié)論。

　　然后我們看一下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布局的簡單學習。

posted @ 2016-06-25 22:11 rpoplar 閱讀(7350) 評論(0) 收藏舉報

刷新頁面返回頂部

Write the code ,change the world.

React-Native 之控件布局

公告