【布局篇】react-native

React 前端之家
前端之家收集整理的这篇文章主要介绍了【布局篇】react-native，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

简介

这里以三种经典布局来讲解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使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作