【布局篇】react-native

WalkerXu 发布于2019-08-19 17:13 / 3415人阅读

摘要：简介这里以三种经典布局来讲解布局概念，主要以为主，中有两个基本元素与，分别类似于端和，用于布局和修饰。

简介

这里以三种经典布局来讲解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

GPU云服务器云服务器 react-native React-Native版Mung 上一篇属性篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78312.html

react-native 布局篇之flexbox

摘要：布局直接阅读大神文章阮一峰写的布局。有几个注意的点，我在刚刚开始中总结的容器属性，，布局方式主轴对齐方式交叉轴对齐方式这里需要特别注意的就是主轴和交叉轴。特别注意的作用对象是主轴在中设置是水平方向上占满整个容器。 FlexBox布局直接阅读大神文章：阮一峰写的FlexBox布局。在react-native中原理是一样的，只不过可能有写属性在react-native中简化了。有几个注意...

Near_Li 2019-08-20 18:11 评论0 收藏0
react-native 布局篇之position

摘要：先简单的看一下示例图相对布局。这个是相对于父容器进行据对布局。绝对布局是脱离文档流的，不过奇怪的是依旧在文档层次结构里面，这个和的也很大不一样。 position布局 position:enum(absolute,relative)。先简单的看一下示例图 showImg(https://segmentfault.com/img/remote/1460000010270428); po...

Lemon_95 2019-08-20 18:11 评论0 收藏0
来聊聊怎么写react-native上的样式吧

摘要：我们来看看文档上是怎么说的吧在中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用来写样式。这些样式名基本上是遵循了上的的命名，只是按照的语法要求使用了驼峰命名法，例如将改为。我遇到了什么问题？不久之前我重构了一个古老的项目，总结了一些js方面的想法，不过对于一个前端项目而言不仅仅只由js组成的嘛，上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架、皮肤和肌肉。既然...

Dionysus_go 2019-08-26 11:48 评论0 收藏0