React-Native入門指南(四)——React-Native布局實戰

標籤：

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篇源碼分析

第4篇React-Native布局實戰

前輩教導我們，掌握一門新技術的最快方法是練習。因此，我找了下比較有愛，暖氣的介面。當然不是給美團打廣告了，只是覺得頁面蠻清新的。下面就是要顯示的效果：

第三篇文章基本上對React-Native的布局基本上有個大致的認識，現在開工吧。總體上，該頁面分三個部分：（1）我們約會吧及其右邊3欄；（2）1元吃大餐及其底下的4欄；（3）紅火來襲的三欄。

一、實現第一部分

1、首先，我們建立一個項目現在我們需要建立一個React-Native的項目，因此可以按照下面的步驟：開啟終端，開始React-Native開發的旅程吧。(1)安裝命令列工具(已經安裝了就不用再安裝了)：sudo npm install -g react-native-cli(2)建立一個空項目：react-native init HelloWorld(3)找到建立的HelloWorld項目,雙擊HelloWorld.xcodeproj即可在xcode中開啟項目。xcodeproj是xcode的專案檔。(4)在xcode中，使用快速鍵cmd + R即可啟動項目。2、清除其餘多餘的代碼,剩下的代碼如下：/*** 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>        );    }});var styles = StyleSheet.create({});AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld);3、此時，除了閃屏外，看到應該是空白的頁面。開工，分析頁面：（1）大致有4個板塊（2）先是左右兩欄(1/3和2/3)；後是上下兩欄(1/2)。我們先用View組件布局。

4、完成初步布局看如下代碼，應該很清楚了，View裡面嵌入並列的兩欄。

實現效果如下：

5、添加內部圖片和文字其實做這種布局，還是有很多的細節，粗糙的效果如下,這塊代碼暫時不貼了，最後一併貼出來：

二、按照第一部分原理，完成整個頁面

完成的效果如下：

整個代碼如下：/*** Sample React Native App* https://github.com/facebook/react-native*/‘use strict‘;var React = require(‘react-native‘);var {    AppRegistry,    StyleSheet,    Text,    View,    Image,} = React;var HelloWorld = React.createClass({    render: function() {        return (            <View style={{}}>                <View style={[styles.height160, styles.row,]}>                <View style={[styles.height160, styles.part_1_left,]}>                <Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我們約吧</Text>                <Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>戀愛家人好朋友</Text>                <Image style={[styles.yue]} source={{uri: ‘http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png‘}}></Image>            </View>            <View style={[styles.height160, styles.part_1_right,]}>            <View style={[styles.row, {flex:1}]}>            <View style={{flex:1}}>              <Text style={[styles.font14, {marginLeft:30}, styles.red]}>超低價值</Text>              <Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: ‘black‘}]}>十元惠生活</Text>            </View>            <View style={[{flex:1}, {marginTop:-13}]}>              <Image style={[styles.hanbao]} source={{uri: ‘http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg‘}}></Image>            </View>          </View>          <View style={[{flex:1, flexDirection: ‘row‘,borderTopWidth:0.5, borderColor:‘#DDD8CE‘}]}>            <View style={{flex:1, borderRightWidth:1, borderColor:‘#DDD8CE‘,}}>                <Text style={{color:‘#F742AB‘, marginLeft:5,fontWeight:‘bold‘, fontSize:15, marginTop:8}}>聚餐宴請</Text>                <Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>                <Image style={{height:25,width:25, alignSelf: ‘center‘}} source={{uri: ‘http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png‘}}></Image>            </View>            <View style={{flex:1,}}>                <Text style={[styles.font14,{color:‘#FF8601‘, marginTop:8, marginLeft:5}]}>名店搶購</Text>                <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>還有</Text>                <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>12:06:12分</Text>            </View>          </View>        </View>    </View>    <View>      <View style={{borderBottomWidth:1,borderTopWidth:1, borderColor:‘#DDD8CE‘, marginTop:40,height:65, flexDirection: ‘row‘,paddingTop:10}}>        <View style={[{flex:1}]}>            <Text style={{fontSize:17, color:‘#FF7F60‘, fontWeight:‘900‘, marginLeft:7}}>一元吃大餐</Text>            <Text style={{marginLeft:7, fontSize:12, marginTop:3}}>新使用者專享</Text>        </View>        <View style={{flex:1}}>            <Image style={{height:50, width:120}} source={{uri:‘http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg‘}}></Image>        </View>      </View>    </View>    <View>      <View style={{flexDirection: ‘row‘,}}>        <View style={[styles.row, {borderColor:‘#DDD8CE‘, borderRightWidth:1}]}>          <View style={{flex:1,}}>            <Text style={{fontSize:17, color:‘#EA6644‘, fontWeight:‘bold‘, marginLeft:7}}>擼串節狂歡</Text>            <Text style={{fontSize:12, color:‘#97979A‘, marginTop:3, marginLeft:7}}>燒烤6.6元起</Text>          </View>          <View style={{flex:1}}>            <Image style={{width:60,height:55}} source={{uri: ‘http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png‘}}></Image>          </View>        </View>        <View style={styles.row}>          <View style={{flex:1}}>            <Text style={{fontSize:17, color:‘#EA6644‘, fontWeight:‘bold‘, marginLeft:7}}>畢業旅行</Text>            <Text style={{fontSize:12, color:‘#97979A‘, marginTop:3, marginLeft:7}}>選好酒店才安心</Text>          </View>          <View style={{flex:1}}>            <Image style={{width:60,height:55}} source={{uri: ‘http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg‘}}></Image>          </View>        </View>      </View>      <View style={{flexDirection: ‘row‘,}}>        <View style={[styles.row, {borderColor:‘#DDD8CE‘, borderRightWidth:1,  marginLeft:1},]}>          <View style={{flex:1}}>            <Text style={{fontSize:17, color:‘#EA6644‘, fontWeight:‘bold‘, marginLeft:7}}>0元餐來襲</Text>            <Text style={{fontSize:12, color:‘#97979A‘, marginTop:3, marginLeft:7}}>免費吃喝玩樂購</Text>          </View>          <View style={{flex:1}}>            <Image style={{width:60,height:55}} source={{uri: ‘http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png‘}}></Image>          </View>        </View>        <View style={styles.row}>          <View style={{flex:1}}>            <Text style={{fontSize:17, color:‘#EA6644‘, fontWeight:‘bold‘, marginLeft:7}}>熱門團購</Text>            <Text style={{fontSize:12, color:‘#97979A‘, marginTop:3, marginLeft:7}}>大家都在買什麼</Text>          </View>          <View style={{flex:1}}>            <Image style={{width:60,height:55}} source={{uri: ‘http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png‘}}></Image>          </View>        </View>      </View>    </View>  </View>);

} });

var styles = StyleSheet.create({    row:{    flexDirection: ‘row‘,    paddingTop:20},marTop18:{    marginTop:18,},marTop14:{    marginTop:14,},font14:{    fontSize:14,},font10:{    fontSize:12,},height160:{    height: 160},yue:{    height:80,},green:{    color:‘#55A44B‘,    fontWeight: ‘900‘},red:{    color: ‘#FF3F0D‘,    fontWeight: ‘900‘},marLeft10:{    marginLeft:10,},part_1_left:{    flex: 1,    borderColor: ‘#DCD7CD‘,    borderRightWidth: 0.5,    borderBottomWidth: 1,},part_1_right:{    flex:2,    borderColor: ‘#DCD7CD‘,    borderBottomWidth: 1,},hanbao:{    height:55,    width:55}});AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld);

React-Native入門指南(四)——React-Native布局實戰