【布局篇】react-native

落日映苍穹つ 2022-03-02 09:22 334阅读 0赞

## 简介 ##

这里以三种经典布局来讲解react-native布局概念，主要以flexbox为主，react native中有两个基本元素< View >与< Text >，分别类似于web端div和span，用于布局和修饰。需要注意的是，react native不是所有的CSS属性都支持，这里有react native所支持的[CSS属性][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;
    }

**页面结构：**

![此处输入图片的描述][squares.svg]

--------------------

### 左中右布局 ###

左右定宽，中间占满

**样式表：**

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>

![此处输入图片的描述][squares.svg]

--------------------

### 上中下布局 ###

类似新闻和门户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布局  
![此处输入图片的描述][squares.svg]

我们可以简单看看APP布局方式，总体来说就是**上中下**的布局方式，我们可以初步先编写外部结构  
**页面结构：**

**样式表：**

wrap {
      flex:1;
      flex-direction:column;
    }
    top{
      height: 40;
      background-color: #EC403C;
    }
    cententWrap{
      flex:1;
      flex-direction:column;
    }
    bottom{
      height: 40;
    }

大致结构算是搭建完毕，开始完善头部展示（偷懒、不想切图，就用个title代替就好啦~~~）  
**页面结构：**

**样式表：**

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自带的一些组件，给大家分享用法和坑，欢迎大家点评，如果有说的不对的地方，欢迎指出

[CSS]: https://facebook.github.io/react-native/docs/flexbox.html#content
[react-native-css]: https://github.com/sabeurthabti/react-native-css
[squares.svg]: /images/20220302/accfa6bed8a74eaf923949ac84e00445.png