国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【布局篇】react-native

WalkerXu / 3450人閱讀

摘要：簡介這里以三種經典布局來講解布局概念，主要以為主，中有兩個基本元素與，分別類似于端和，用于布局和修飾。

簡介

這里以三種經典布局來講解react-native布局概念，主要以flexbox為主，react native中有兩個基本元素< View >與< Text >，分別類似于web端div和span，用于布局和修飾。需要注意的是，react native不是所有的CSS屬性都支持，這里有react native所支持的CSS屬性

準備工作

在JSX中寫樣式還是有點不習慣，這里使用react-native-css模塊來編寫樣式，安裝、使用過程如下

npm install react-native-css -g 
react-native-css -i style.css -o style.js --watch
布局講解 左右布局

由于是橫向布局，我們需要flex-direction: row（默認縱向布局），左右以1:1方式排版，就都需要flex:1，布局容器也需要加上flex:1，表示為伸縮容器。由于react native沒有br標簽，需要換行只能將換行符插入。

樣式表：

wrap {
  flex:1;
  flex-direction: row;
  background-color: yellow;
}

left{
  flex:1;
  background-color: #64BA9D;
}

right{
  flex:1;
  background-color: #008E59;
}

text{
  padding:10;
  font-size:16;
  color:#EEEEEE;
  line-height:20;
  text-align: center;
}

頁面結構：


    
      
        這是左側欄{"
"}
        這是左側欄{"
"}
        這是左側欄{"
"}
        這是左側欄{"
"}
      
    
    
      
        這是右側欄{"
"}
        這是右側欄{"
"}
        這是右側欄{"
"}
        這是右側欄{"
"}

左中右布局

左右定寬，中間占滿

樣式表：

wrap {
  flex:1;
  flex-direction: row;
  background-color: yellow;
}

left{
  width: 80;
  background-color: #64BA9D;
}

centent{
  flex:1;
  background-color: #a9ea00;
}

right{
  width: 80;
  background-color: #008E59;
}

text{
  padding:10;
  font-size:16;
  color:#EEEEEE;
  line-height:20;
  text-align: center;
}

頁面結構：


    
      
        這是左側欄{"
"}
        這是左側欄{"
"}
        這是左側欄{"
"}
        這是左側欄{"
"}
      
    
    
      
        這是內容區{"
"}
        這是內容區{"
"}
        這是內容區{"
"}
        這是內容區{"
"}
      
    
    
      
        這是右側欄{"
"}
        這是右側欄{"
"}
        這是右側欄{"
"}
        這是右側欄{"
"}

上中下布局

類似新聞和門戶APP的布局，上下貼邊，中間為內容區（帶滾動條，后續組件篇再講解）

樣式表：

wrap {
  flex:1;
  flex-direction:column;
}

top{
  height: 40;
  background-color: #008E59;
}
centent{
  flex:1;
  background-color: #64BA9D;
}

bottom{
  height: 40;
  background-color: #a9ea00;
}

text{
  padding:10;
  font-size:16;
  color:#fff;
  line-height:20;
  text-align: center;
}

頁面結構：


    
      
        頭部信息
      
    
    
      
        這是內容區{"
"}
      
    
    
      
        尾部信息
綜合布局

簡單模擬網易新聞APP布局

我們可以簡單看看APP布局方式，總體來說就是上中下的布局方式，我們可以初步先編寫外部結構
頁面結構：


    
      頭部
    
    
      新聞主題
    
    
      
        尾部導航

樣式表：

wrap {
  flex:1;
  flex-direction:column;
}
top{
  height: 40;
  background-color: #EC403C;
}
cententWrap{
  flex:1;
  flex-direction:column;
}
bottom{
  height: 40;
}

大致結構算是搭建完畢，開始完善頭部展示（偷懶、不想切圖，就用個title代替就好啦~~~）
頁面結構：


    
      網易
    
    
      新聞主題
    
    
      
        尾部導航

樣式表：

topTitle{
  margin-top: 15;
  margin-left: 20;
  text-align: left;
  font-size: 14;
  color:#FFF;
}

頭部內容完成之后，就完善內容區域的導航條，但是react-native并沒有提供ul、li標簽（也許以后有），這個是要View來代替ul，Text代替li，代碼和數據如下：
頁面結構：

var cententNav = ["頭條", "熱點", "娛樂", "體育", "財經"];
return (
  
    
      網易
    
    
      
        {
          cententNav.map(function(el, index){
            return 
              {cententNav[index]}
            

          })
        }
      
    
    
      
        尾部導航
      
    
  
);

樣式表：

cententWrap{
  flex:1;
  flex-direction:column;
}
cententNav{
  flex-direction: row;
  height: 20;
  margin-left: 5;
  margin-top: 5;
  margin-right: 5;
}
cententNavText{
  width: 60;
  font-size: 14;
  color: #9C9C9C;
  margin-left: 10;
}

新聞主題方面可以劃分為左右兩欄，左欄固定寬，右欄占滿，由于react-native不支持overflow:scroll屬性，這里會用到一個ScrollView的滾動條組件來展示新聞概述，篇幅可能較長，底部就不再編寫了（就是懶~~），大家各自完善吧，以下是全部的布局代碼和樣式。

頁面結構：

render: function() {
// var repeatArr = Array(100).join("1").split("")
var cententNav = ["頭條", "熱點", "娛樂", "體育", "財經"],
    NEW_DATA = [
      {
        img: "http://7xl041.com1.z0.glb.clouddn.com/new1.png",
        title: "李克強宴請上合各參會領導人",
        content: "稱會議闡釋了上合組織“大家庭”的深厚友誼和良好氛圍",
        typeImg: "http://7xl041.com1.z0.glb.clouddn.com/new-type1.png"
      },
      //.....類似數據
    ];

return (
  
    
      網易
    
    
      
        {
          cententNav.map(function(el, index){
            return 
              {cententNav[index]}
            

          })
        }
      
      
        {
          NEW_DATA.map(function(el, index){
            return (
              
                
                  
                  
                    {NEW_DATA[index].title}
                    {NEW_DATA[index].content}
                  
                  
                
                
              
            )
          })
        }
      
    
    
      
        尾部信息
      
    
  
);

}

樣式表：

wrap {
  flex:1;
  flex-direction:column;
}

top{
  height: 40;
  background-color: #EC403C;
}
topTitle{
  margin-top: 15;
  margin-left: 20;
  text-align: left;
  font-size: 14;
  color:#FFF;
}

cententWrap{
  flex:1;
  flex-direction:column;
}
cententNav{
  flex-direction: row;
  height: 20;
  margin-left: 5;
  margin-top: 5;
  margin-right: 5;
}
cententNavText{
  width: 60;
  font-size: 14;
  color: #9C9C9C;
  margin-left: 10;
}
centent{
  flex:1;
  flex-direction:column;
  borderBottomWidth:1;
}
cententLi{
  flex-direction: row;
  margin-left: 10;
  margin-right: 10;
}
cententImg{
  width: 80;
  height: 80;
}
cententTitle{
  font-size: 16;
  color: #232323;
  margin-bottom: 3;
}
cententCentent{
  font-size: 12;
}
rightCentent{
  flex: 1;
  padding-left: 5;
  padding-top: 5;
  padding-right: 5;
  padding-bottom: 5;
}
cententType{
  width: 40;
  height: 22;
  position: absolute;
  bottom: 0;
  right: 0;
}

bottom{
  height: 40;
}

text{
  padding:10;
  font-size:16;
  color:#000;
  line-height:20;
  text-align: center;
}

textR{
  font-weight: bold;
  color:#EC403C;
}
line{
  height: 1;
  background-color: #E4E4E4;
  margin-left: 10;
  margin-right: 10;
  margin-top: 7;
  margin-bottom: 7;
}
總結

以上就是一些布局的描述，總得來說現在react-native能支持的CSS屬性還不多，比如上面說的overflow，也許以后會更加完善。
下一篇打算寫寫android自帶的一些組件，給大家分享用法和坑，歡迎大家點評，如果有說的不對的地方，歡迎指出

參考文檔

http://www.html-js.com/article/Native-react-native-react-layout%203322

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78312.html

相關文章

  • react-native 布局篇之flexbox

    摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個注意的點，我在剛剛開始中總結的容器屬性，，布局方式主軸對齊方式交叉軸對齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對象是主軸在中設置是水平方向上占滿整個容器。 FlexBox布局 直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡化了。有幾個注意...

    Near_Li 評論0 收藏0

  • react-native 布局篇之position

    摘要：先簡單的看一下示例圖相對布局。這個是相對于父容器進行據對布局。絕對布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結構里面，這個和的也很大不一樣。 position布局 position:enum(absolute,relative)。先簡單的看一下示例圖 showImg(https://segmentfault.com/img/remote/1460000010270428); po...

    Lemon_95 評論0 收藏0

  • 來聊聊怎么寫react-native上的樣式吧

    摘要：我們來看看文檔上是怎么說的吧在中，你并不需要學習什么特殊的語法來定義樣式。我們仍然是使用來寫樣式。這些樣式名基本上是遵循了上的的命名，只是按照的語法要求使用了駝峰命名法，例如將改為。 我遇到了什么問題？ 不久之前我重構了一個古老的項目，總結了一些js方面的想法，不過對于一個前端項目而言不僅僅只由js組成的嘛，上學的時候老師和我說HTML+CSS+JS對應的是頁面的骨架、皮膚和肌肉。既然...

    Dionysus_go 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<