zoukankan      html  css  js  c++  java
  • 从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布局,也就基本搞定了。

  • 相关阅读:
    【Oracle11g】06_网络配置
    【Python3 爬虫】U20_正则表达式爬取古诗文网
    【Oracle11g】05_完整性约束
    【Python3 爬虫】U19_正则表达式之re模块其他函数
    【Python3 爬虫】U18_正则表达式之group分组
    【Python3 爬虫】U17_正则表达式之转义字符和原生字符
    【Python3 爬虫】U16_正则表达式之开始结束和或语法
    常见的概率分布
    广义线性模型
    gamma函数及相关其分布
  • 原文地址:https://www.cnblogs.com/zhenwen/p/5828035.html
Copyright © 2011-2022 走看看