React-Native入門指南(三) ——CSS和UI布局，reactui

React-Native入門指南(三) ——CSS和UI布局，reactui
React-Native入門指南github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript開發你的原生應用，釋放Native的UI體驗，體驗 Hybird開發效率。

最近一個星期寫的文章如下：

• 第1篇hello react-native
• 第2篇認識代碼結構
• 第3篇css和布局
• 第4篇學會react-native布局
• 第5篇ui組件

還有幾篇需要這這周完成（這塊會時刻更新）：

• 第6篇JSX文法
• 第7篇自己動手寫組件
• 第8篇模組化開發
• 第10篇搭建項目架構
• 第11篇源碼分析

第3篇CSS和UI布局一、瞭解React-Native組件

作為開發人員都知道，UI組件對於一個應用的重要性。也許，在一款應用中，你還沒有完整的，有體系的構建UI組件，但是你一定或多或少有種想把組件抽出來的衝動，就像有些衝動是人類的本能一樣....這是作為一個開發人員的本能。那麼組件的複用和統一話是十分必要的。常見的組件有：日曆、下來列表（常在應用中表現為下拉重新整理）、導覽列、頭部、底部、選項卡等等。React-Native就提供了一套iOS原生的組件，這樣就不用HTML5去類比組件了。React-Native使用css來構建頁面配置，使用Native iOS Components給我們提供強大的組件功能。目前已有組件如：

二、使用CSS樣式 & Flexbox布局

第一篇，已經知道了如何構建工程。這裡同樣建立一個HelloWorld工程。預設啟動介面如：

1、基本樣式這裡使用View和Text組件作為示範對象，首先，修改index.ios.js裡面的代碼，這裡只需要關注StyleSheet和render裡面的模板。修改後的代碼如下：/*** Sample React Native App* https://github.com/facebook/react-native*/'use strict';var React = require('react-native');var {    AppRegistry,    StyleSheet,    Text,    View,} = React;var HelloWorld = React.createClass({    render: function() {        return (            <View>                <View></View>            </View>        );    }});var styles = StyleSheet.create({});AppRegistry.registerComponent('HelloWorld', () => HelloWorld);這時候，你cmd + R重新整理模擬器應該看到是空白的介面。現在，是展現css魅力的時候了。React-native使用的css 表達是一個JS自面量對象，並且嚴格區分該對象屬性的類型，所以要遵循對象的寫法，而不能使用以前css的寫法，這個需要自己熟悉了。（1）增加一個帶邊框的矩形，紅色邊框    直接在組件上添加樣式是這樣的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是組件的一個自有屬性，第一個{}JS執行環境或者說是模板，第二個{}只是css樣式對象的括弧而已(慢慢體會,不難理解)。這樣修改後的代碼如下：    render: function() {        return (            <View>                <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>                </View>            </View>        );    }    cmd ＋ R重新整理模擬器，結果如下：

    (2)如何知道該組件支援哪些樣式呢？    上面的已經很簡單了，作為web開發人員用腳趾頭都能閉眼寫出來。如果我們需要知道該組件又哪些樣式，又不用查手冊，一個最為簡單的方法是，在樣式表裡寫錯一個屬性，比如我寫一個沒有的屬性“border”。但是該屬性必須寫到樣式的建立中去，而不能寫為內聯樣式。寫成內聯樣式，你是看不到報錯提示的。我門改寫成樣式表建立類裡面：    var HelloWorld = React.createClass({        render: function() {                return (                    <View>                        <View style={styles.style_1}>                        </View>                    </View>                );        }    });    var styles = StyleSheet.create({        style_1:{            border: '1px solid red',            height:40,             borderWidth: 1,              borderColor: 'red',        }    });     這個時候你就能齊刷刷的看到樣式表的報錯和提示有哪些樣式了，如所示：

    （3）獨立樣式類    其實上面已經展示了獨立樣式類了，那麼樣式類建立很簡單，我們只需要使用React.StyleSheet來建立類。其實建立的類就是一個js對象而已。那麼在組件上引用是這樣的<View style={{對象名稱.對象屬性}}></View>，就跟上面（2）的代碼一樣。    2、說說Flexbox布局    其實，這樣的css樣式，作為web開發這一用就會，那麼說說布局的事兒。除去margin, padding, position等大家熟悉的web布局的話，最為重要的就是flexbox，目前支援的屬性如下,有6個：

     (1)先說flex屬性，上一段代碼        var HelloWorld = React.createClass({            render: function() {                return (                    <View style={styles.style_0}>                        <View style={styles.style_1}></View>                        <View style={styles.style_1}></View>                        <View style={{flex:10}}></View>                    </View>                );            }        });        var styles = StyleSheet.create({            style_0:{                flex:1,            },            style_1:{                flex: 5,                height:40,                 borderWidth: 1,                  borderColor: 'red',            }        });        當一個(元素)組件，定義了flex屬性時，表示改元素是可伸縮的。當然flex的屬性值是大於0的時候才伸縮，其他小於和等於0的時候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，因為沒有兄弟節點和他搶佔空間。裡層是3個view,可以看到三個view的flex屬性加起來是5+5+10=20,所以第一個view和第二個view分別佔1／4伸縮空間， 最後一個view佔據1／2空間，具體如：

    (2) flexDirection    flexDirection在React-Native中只有兩個屬性，一個是row(橫向伸縮)和column(縱向伸縮)。具體的想過可見如下代碼：    var HelloWorld = React.createClass({        render: function() {            return (                <View style={styles.style_0}>                    <View style={styles.style_1}>                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>                </View>                <View style={[styles.style_1, {flexDirection: 'column'}]}>                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>                </View>                <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>                    <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>                    </View>                </View>            );        }    });    var styles = StyleSheet.create({        style_0:{            flex:1,        },        style_1:{            flex: 5,            flexDirection: 'row',            height:40,             borderWidth: 1,              borderColor: 'red',        }    });    具體的效果如下：

    (3)alignSelf:對齊    alignSelf的對齊主要有四種：flex-start、 flex-end、 center、  auto、 stretch。看看代碼，應該就很清楚了：

    效果如

    （4）水平垂直置中    alignItems是alignSelf的變種，跟alignSelf的功能類似，可用於水平置中；justifyContent用於垂直置中，屬性較多，可以瞭解下。

    效果如