【布局篇】react-native

0

简介

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



如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

jflame · 2015年12月17日

react-native 是支持边框颜色borderColorborderRadius 的。
至于overflow:scroll,做native开发时,实现类似效果也是用 ScrollView 组件,react-native 毕竟只是将 jsx 渲染成 native 组件,估计以后也不会支持 overflow:scroll,靠判断 style 改变组件类型毕竟有些难处理了

回复

jayzou 作者 · 2015年12月17日

已修改,感谢提醒

回复

pepping · 2015年12月17日

上中下布局中的样式表有误哦~

回复

jayzou 作者 · 2015年12月18日

已修改,感谢提醒

回复

274445541 · 2016年03月03日

兄弟,等着你更新Android自带组件

回复

jayzou 作者 · 2016年03月03日

最近有点忙,不过已经完成一半,可能要过些日子才能更

回复

274445541 · 2016年03月03日

很适合初学者,网上大多是IOS文章

回复

jayzou 作者 · 2016年03月03日

谢谢你的支持

回复

fancygirl · 2016年07月27日

样式文件要引入吗?

回复

载入中...