React Native学习笔记（四）布局

@H_404_1@

基本样式
对于一个组件，定义组件的布局样式通过style属性来定义。
例如：

<Text style = {{color: '#ff0000',fontSize: 15}}> 学习布局 </Text>

这里通过style属性，定义了Text文本的字体颜色和字体大小。这里第一个大括号是：JSX语法，第二个大括号是:javaScript对象，我们把需要定义的样式都以对象的方式写在这个大括号里。
我们也可以把一个样式赋给一个变量：然后传进去。
例如：

<Text style = {styles.textContent}> 测试 </Text>
// ...
const styles = StyleSheet.create({
  textContent: {
    color: '#ff0000',fontSize: 1,},});

这里我们使用React.StyleSheet创建了一个 JS对象，那么在组件上引用是这样的：style={{对象名称.对象属性}}。
知道组件中如何使用样式了以后，我们自然会想到一个组件都支持那些样式。此时我们可以通过查找一些手册去学习都有哪些样式，我们还可以通过编译器报的错误提示来查看。例如：我们随意写一个它不支持的属性test。

const styles = StyleSheet.create({ textContent: { color: '#ff0000',test: 2,});

如上图，我们可以看到一些报错信息。在这些提示中给出了有效的样式提示。
2. FlexBox布局
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
flexBox是一个整体模块，而不是单一的一个属性。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。
flex布局涉及到了两个概念：主轴和纵轴。如下图示意：

??
主轴和纵轴的方向是受flexDirection属性影响的。如果flexDirection属性是
为了方便表述，下面定义两个表述词：
container:定义为父容器，有些属性是作用在父容器上的，即需要设置在父容器上。
item：定义为子容器或当前容器（组件），有些属性是作用在当前容器上的，即需要设置在子容器上。
1）flex属性
flex属性是作用在item上的。当一个组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩。

<View style = {styles.container}>
        <View style = {styles.subContainer} >
            <View style = {styles.item1}>
              <Text style = {styles.textContent}> item1 </Text>
            </View>
            <View style = {styles.item2}>
              <Text style = {styles.textContent}> item2 </Text>
            </View>
            <View style = {styles.item3}>
              <Text style = {styles.textContent}> item3 </Text>
            </View>
          </View>
      </View>
const styles = StyleSheet.create({
  container: {
    flex: 1,subContainer: {
    flex: 1,flexDirection: 'row',item1: {
    flex: 1,height: 40,backgroundColor: '#ff0000',item2: {
    flex: 1,backgroundColor: '#00ff00',item3: {
    flex: 1,backgroundColor: '#0000ff',textContent: {
    color: '#ffffff',fontSize: 20,

如下图：

因为item1、item2、item3的flex属性都设置为1，所以它们都是可以伸缩布局的。flex也可以理解为权重。代表所占的比例。如上图它们的flex都设置为1时，它们是等宽的。如果设置它们的flex属性分别为：5:10:5,那么会得到如下的图：

2）flexDirection属性
flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。在上面的设置中就已经运用到了flexDirection属性。subContainer定义的样式中就已经设置了flexDirection为row，设置了它为横向伸缩。该属性值默认是纵向伸缩的。
3）justifyContent属性
justifyContent属性定义Item在主轴上的对齐方式。它的可取值为[flex-start,flex-end,center,space-between,space-around]
例如：

<View style = {styles.container}>
            <View style = {styles.item1}>
              <Text style = {styles.textContent}> item1 </Text>
            </View>
            <View style = {styles.item2}>
              <Text style = {styles.textContent}> item2 </Text>
            </View>
            <View style = {styles.item3}>
              <Text style = {styles.textContent}> item3 </Text>
          </View>
      </View>
const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'flex-start',item1: {
    width: 40,item2: {
    width: 40,item3: {
    width: 40,fontSize: 15,});

其他属性值如：flex-start,space-around

React Native学习笔记（四）布局

猜你在找的React相关文章