【布局篇】react-native

头像
jayzou
    阅读 8 分钟

    简介

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

    页面结构：

    <View style={styles.wrap}>
    <View style={styles.left}>
      <Text style={styles.text}>
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
      </Text>
    </View>
    <View style={styles.right}>
      <Text style={styles.text}>
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
      </Text>
    </View>
</View>

    此处输入图片的描述

    左中右布局

    左右定宽，中间占满

    样式表：

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

    页面结构：

    <View style={styles.wrap}>
    <View style={styles.left}>
      <Text style={styles.text}>
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
        这是左侧栏{'\n'}
      </Text>
    </View>
    <View style={styles.centent}>
      <Text style={styles.text}>
        这是内容区{'\n'}
        这是内容区{'\n'}
        这是内容区{'\n'}
        这是内容区{'\n'}
      </Text>
    </View>
    <View style={styles.right}>
      <Text style={styles.text}>
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
        这是右侧栏{'\n'}
      </Text>
    </View>
</View>

    此处输入图片的描述

    上中下布局

    类似新闻和门户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;
}

    页面结构：

    <View style={styles.wrap}>
    <View style={styles.top}>
      <Text style={styles.text}>
        头部信息
      </Text>
    </View>
    <View style={styles.centent}>
      <Text style={styles.text}>
        这是内容区{'\n'}
      </Text>
    </View>
    <View style={styles.bottom}>
      <Text style={styles.text}>
        尾部信息
      </Text>
    </View>
</View>

    综合布局

    简单模拟网易新闻APP布局
    此处输入图片的描述

    我们可以简单看看APP布局方式，总体来说就是上中下的布局方式，我们可以初步先编写外部结构
    页面结构：

    <View style={styles.wrap}>
    <View style={styles.top}>
      <Text>头部</Text>
    </View>
    <View style={styles.cententWrap}>
      <Text>新闻主题</Text>
    </View>
    <View style={styles.bottom}>
      <Text>
        尾部导航
      </Text>
    </View>
</View>

    样式表：

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

    大致结构算是搭建完毕，开始完善头部展示（偷懒、不想切图，就用个title代替就好啦~~~）
    页面结构：

    <View style={styles.wrap}>
    <View style={styles.top}>
      <Text style={styles.topTitle}>网易</Text>
    </View>
    <View style={styles.cententWrap}>
      <Text>新闻主题</Text>
    </View>
    <View style={styles.bottom}>
      <Text>
        尾部导航
      </Text>
    </View>
</View>

    样式表：

    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 (
  <View style={styles.wrap}>
    <View style={styles.top}>
      <Text style={styles.topTitle}>网易</Text>
    </View>
    <View style={styles.cententWrap}>
      <View style={styles.cententNav}>
        {
          cententNav.map(function(el, index){
            return <Text style={styles.cententNavText}>
              <Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
            </Text>

          })
        }
      </View>
    </View>
    <View style={styles.bottom}>
      <Text>
        尾部导航
      </Text>
    </View>
  </View>
);

    样式表：

    
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 (
  <View style={styles.wrap}>
    <View style={styles.top}>
      <Text style={styles.topTitle}>网易</Text>
    </View>
    <View style={styles.cententWrap}>
      <View style={styles.cententNav}>
        {
          cententNav.map(function(el, index){
            return <Text style={styles.cententNavText}>
              <Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
            </Text>

          })
        }
      </View>
      <ScrollView style={styles.centent}>
        {
          NEW_DATA.map(function(el, index){
            return (
              <View>
                <View style={styles.cententLi}>
                  <Image source={{uri: NEW_DATA[index].img}} style={styles.cententImg} />
                  <View style={styles.rightCentent}>
                    <Text style={styles.cententTitle}>{NEW_DATA[index].title}</Text>
                    <Text style={styles.cententCentent}>{NEW_DATA[index].content}</Text>
                  </View>
                  <Image source={{uri: NEW_DATA[index].typeImg}} style={styles.cententType} />
                </View>
                <View style={styles.line}></View>
              </View>
            )
          })
        }
      </ScrollView>
    </View>
    <View style={styles.bottom}>
      <Text style={styles.text}>
        尾部信息
      </Text>
    </View>
  </View>
);

    }

    样式表：

    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

    javascriptreact-native
    jayzou
    2.8k 声望498 粉丝

    生鱼忧患，死鱼安乐

    « 上一篇
    【入门篇】react-native
    下一篇 »
    node-grade 离线生成图片未加载前背景

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    打造一个媲美Ctrf+F的搜索组件

    jayzou赞 6阅读 4k评论 1

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新