成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【布局篇】react-native

WalkerXu / 3472人閱讀

摘要：簡(jiǎn)介這里以三種經(jīng)典布局來(lái)講解布局概念，主要以為主，中有兩個(gè)基本元素與，分別類(lèi)似于端和，用于布局和修飾。

簡(jiǎn)介

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

準(zhǔn)備工作

在JSX中寫(xiě)樣式還是有點(diǎn)不習(xí)慣，這里使用react-native-css模塊來(lái)編寫(xiě)樣式，安裝、使用過(guò)程如下

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

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

樣式表：

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;
}

頁(yè)面結(jié)構(gòu)：


    
      
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
      
    
    
      
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}

左中右布局

左右定寬，中間占滿

樣式表：

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;
}

頁(yè)面結(jié)構(gòu)：


    
      
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
        這是左側(cè)欄{"
"}
      
    
    
      
        這是內(nèi)容區(qū){"
"}
        這是內(nèi)容區(qū){"
"}
        這是內(nèi)容區(qū){"
"}
        這是內(nèi)容區(qū){"
"}
      
    
    
      
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}
        這是右側(cè)欄{"
"}

上中下布局

類(lèi)似新聞和門(mén)戶APP的布局，上下貼邊，中間為內(nèi)容區(qū)（帶滾動(dòng)條，后續(xù)組件篇再講解）

樣式表：

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;
}

頁(yè)面結(jié)構(gòu)：


    
      
        頭部信息
      
    
    
      
        這是內(nèi)容區(qū){"
"}
      
    
    
      
        尾部信息
綜合布局

簡(jiǎn)單模擬網(wǎng)易新聞APP布局

我們可以簡(jiǎn)單看看APP布局方式，總體來(lái)說(shuō)就是上中下的布局方式，我們可以初步先編寫(xiě)外部結(jié)構(gòu)
頁(yè)面結(jié)構(gòu)：


    
      頭部
    
    
      新聞主題
    
    
      
        尾部導(dǎo)航

樣式表：

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

大致結(jié)構(gòu)算是搭建完畢，開(kāi)始完善頭部展示（偷懶、不想切圖，就用個(gè)title代替就好啦~~~）
頁(yè)面結(jié)構(gòu)：


    
      網(wǎng)易
    
    
      新聞主題
    
    
      
        尾部導(dǎo)航

樣式表：

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

頭部?jī)?nèi)容完成之后，就完善內(nèi)容區(qū)域的導(dǎo)航條，但是react-native并沒(méi)有提供ul、li標(biāo)簽（也許以后有），這個(gè)是要View來(lái)代替ul，Text代替li，代碼和數(shù)據(jù)如下：
頁(yè)面結(jié)構(gòu)：

var cententNav = ["頭條", "熱點(diǎn)", "娛樂(lè)", "體育", "財(cái)經(jīng)"];
return (
  
    
      網(wǎng)易
    
    
      
        {
          cententNav.map(function(el, index){
            return 
              {cententNav[index]}
            

          })
        }
      
    
    
      
        尾部導(dǎo)航
      
    
  
);

樣式表：

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屬性，這里會(huì)用到一個(gè)ScrollView的滾動(dòng)條組件來(lái)展示新聞概述，篇幅可能較長(zhǎng)，底部就不再編寫(xiě)了（就是懶~~），大家各自完善吧，以下是全部的布局代碼和樣式。

頁(yè)面結(jié)構(gòu)：

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

return (
  
    
      網(wǎng)易
    
    
      
        {
          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;
}
總結(jié)

以上就是一些布局的描述，總得來(lái)說(shuō)現(xiàn)在react-native能支持的CSS屬性還不多，比如上面說(shuō)的overflow，也許以后會(huì)更加完善。
下一篇打算寫(xiě)寫(xiě)android自帶的一些組件，給大家分享用法和坑，歡迎大家點(diǎn)評(píng)，如果有說(shuō)的不對(duì)的地方，歡迎指出

參考文檔

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78312.html

相關(guān)文章

  • react-native 布局篇之flexbox

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

    Near_Li 評(píng)論0 收藏0

  • react-native 布局篇之position

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

    Lemon_95 評(píng)論0 收藏0

  • 來(lái)聊聊怎么寫(xiě)react-native上的樣式吧

    摘要：我們來(lái)看看文檔上是怎么說(shuō)的吧在中，你并不需要學(xué)習(xí)什么特殊的語(yǔ)法來(lái)定義樣式。我們?nèi)匀皇鞘褂脕?lái)寫(xiě)樣式。這些樣式名基本上是遵循了上的的命名，只是按照的語(yǔ)法要求使用了駝峰命名法，例如將改為。 我遇到了什么問(wèn)題？ 不久之前我重構(gòu)了一個(gè)古老的項(xiàng)目，總結(jié)了一些js方面的想法，不過(guò)對(duì)于一個(gè)前端項(xiàng)目而言不僅僅只由js組成的嘛，上學(xué)的時(shí)候老師和我說(shuō)HTML+CSS+JS對(duì)應(yīng)的是頁(yè)面的骨架、皮膚和肌肉。既然...

    Dionysus_go 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<