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、清除其餘多餘的**,剩下的**如下：
/*** 
*/'use strict';
var react = require('react-native');
var = react;
var helloworld = react.createclass(
});var styles = stylesheet.create();
3、此時，除了閃屏外，看到應該是空白的頁面。開工，分析頁面：
（1）大致有4個板塊
（2）先是左右兩欄(1/3和2/3)；後是上下兩欄(1/2)。我們先用view元件布局。
4、完成初步布局

看如下**，應該很清楚了，view裡面嵌入並列的兩欄。
實現效果如下：

5、新增內部和文字

其實做這種布局，還是有很多的細節，粗糙的效果如下,這塊**暫時不貼了，最後一併貼出來：
二、按照第一部分原理，完成整個頁面
完成的效果如下：

整個**如下：

/*** 
*/'use strict';
var react = require('react-native');
var = react;
var helloworld = react.createclass( });
var styles = stylesheet.create(,
martop18:,
martop14:,
font14:,
font10:,
height160:,
yue:,
green:,
red:,
marleft10:,
part_1_left:,
part_1_right:,
hanbao:
});
 
React Native布局詳解
flexbox 布局 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器屬性 簡述 常用 ...
React Native 之布局篇
一.flex布局 什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性 position屬性 float屬性,這種布局方式對於特殊布局非常不方便,比如,垂直居中就不好實現.2009年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指...
ReactNative布局屬性
flexdirection enum row column row reverse column reverse flexdirection屬性定義了父檢視中的子元素沿橫軸或側軸方片的排列方式。justifycontent enum flex start flex end center space ...