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

Posted 2020-08-05 文文向天歌

利用flex布局的web移动端和react native的三栏布局实现（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布局，也就基本搞定了。