【布局篇】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;
  backg