从web移动端布局到react native布局

在web移动端通常会有这样的需求，实现上中下三栏布局（上下导航栏位置固定，中间部分内容超出可滚动），如下图所示：

实现方法如下：

HTML结构：

<div class='container'><div class='header'></div><div class='content'></div><div class='footer'></div>
</div>

首先可以利用fixed或者absolute定位，实现简单。

现在介绍另外一种方法——利用-wekkit-box/flex，实现上下两栏固定高度，中间高度自适应的布局。

CSS代码如下：

使用-webkit-box：

.container{width: 100%;height: 100%;display: -webkit-box;-webkit-box-orient: vertical;
}
.header{height: 200px;background-color: red;
}
.content{-webkit-box-flex: 1;overflow: auto;
}
.footer{height: 200px;background-color: blue;
}

使用flex：

.container{width: 100%;height: 100%;display: flex;flex-direction: column;
}
.header{height: 200px;background-color: red;
}
.content{flex: 1;overflow: auto;
}
.footer{height: 200px;background-color: blue;
}

实际应用中应该将以上两种放在一起写，这里只是为了下文而将新旧两种写法分开。

在react native中，实现样式只是CSS中的一个小子集，其中就使用flex的布局

实现的思路和上面也是相同的，不过由于react native中对于View组件而言，overflow属性只有'visible'和'hidden'两个值（默认是'hidden' ），并没有可滚动的属性，因此中间内容部分需要使用"ScrollView"滚动容器

组件渲染：

render(){return(<View style={styles.container}><View style={styles.header}></View><ScrollView style={styles.content}></ScrollView><View style={styles.footer}></View></View>
  );
}

样式：

const styles = StyleSheet.create({container: {flex: 1,　　　flexDirection: 'column'},header: {height: 100,backgroundColor: 'red',},content: {flex: 1,},footer: {height: 100,backgroundColor: 'blue',}
});

效果：

react native最基础的布局就实现了。

由于react native中布局方法基本就这两种： flex和absolute布局，掌握了flex布局，也就基本搞定了。

转载于:https://www.cnblogs.com/zhenwen/p/5828035.html

从web移动端布局到react native布局相关推荐

React Native布局详细指南
本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Nati ...
什么是 Native、Web App、Hybrid、React Native和Weex？
一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介此处App为应用,appli ...
React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提 ...
什么是 Native、Web App、Hybrid、React Native 和 Weex？
(点击上方公众号,可快速关注) 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句话概要 Native.Web App.Hybrid.React N ...
Web前端：什么是 React Native?
React Native 是一种 JavaScript 框架,可让开发人员构建强大且响应迅速的交互式应用程序.技术驱动型企业现在选择使用React -Native框架来构建超越现代移动应用程序. ...
适合做app的前端框架有哪些？webAPP移动端App：react native、weex、flutter
React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
2.React Native Flex布局介绍以及实践
好久没有写博客,一直在用自己的印象笔记记录一些问题.2017年了,想重新的把博客写起来.也希望通过这个平台交一些朋友. 没有具体的介绍基本的语法,主要是说明了与标准的CSS Flex的一些区别以及一个 ...

从web移动端布局到react native布局

从web移动端布局到react native布局相关推荐

最新文章

热门文章