【布局篇】react-native

React 2020-05-24

简介

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

相关文章

react初探（二）之父子组件通信、封装公共组件
一、前言 在组件方面react和Vue一样的，核心思想玩的就是组件...
rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了
前言： 前段时间学习完react后，刚好就接到公司一个react项目...
react初探（一）之JSX、状态（state）管理、条件渲染、事件处理
前言： 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...