本節(jié)介紹：

樣式
高度與寬度
使用Flexbox布局

樣式

在ReactNative中仍然使用JavaScript來寫樣式，所有組件都接受名為style的屬性。這些樣式名基本上是遵循了Web上的CSS命名，只是按照J(rèn)S的語法要求使用了駝峰命名法，例如將background-color改為backgroundColor。

style屬性可以是一個(gè)普通的JavaScript對(duì)象。你還可以傳入一個(gè)數(shù)組——在數(shù)組中位置居后的樣式對(duì)象比居前的優(yōu)先級(jí)更高，這樣你可以間接實(shí)現(xiàn)樣式的繼承。

使用StyleSheet.create來幾種定義組件的樣式

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    alignItems: "center",
  },
  bigBlue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 40,
  },
  red: {
    color: "red"
  },
});

module.exports = LotsOfStyles;

運(yùn)行結(jié)果：

運(yùn)行結(jié)果.png

高度與寬度

• 指定寬高

最簡單的給組件設(shè)定尺寸的方式就是在樣式中指定固定的width和height。React Native中的尺寸都是無單位的，表示的是與設(shè)備像素密度無關(guān)的邏輯像素點(diǎn)。

class LotsOfStyles extends Component {
  render() {
    return(
      <View>
        <View style={{width: 50, height: 50, backgroundColor: "powderblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{width: 150, height: 150, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

• 彈性（Flex）寬高

在組件樣式中使用flex可以使其在可利用的空間中動(dòng)態(tài)的擴(kuò)張或收縮。一般而言我們會(huì)使用flex:1來指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1，則這些子組件會(huì)平分父容器中剩余的空間。如果這些并列的子組件的flex值不一樣，則誰的值更大，誰占據(jù)剩余空間的比例就更大（即占據(jù)剩余空間的比等于并列組件間flex值的比，也就是權(quán)重）。

組件能夠撐滿剩余空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height，也沒有設(shè)定flex，則父容器的尺寸為零。其子組件如果使用了flex，也是無法顯示的。

class LotsOfStyles extends Component {
  render() {
    return(
      // 父容器設(shè)定很重要，如果父容器沒有設(shè)定width和height，也沒有設(shè)定flex，則父容器的尺寸為0
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: "powderblue"}}></View>
        <View style={{flex: 2, backgroundColor: "skyblue"}}></View>
        <View style={{flex: 3, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

運(yùn)行結(jié)果：

運(yùn)行結(jié)果.png

使用Flexbox布局

在React Native中使用flexbox規(guī)則來指定某個(gè)組件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。一般來說，使用flexDirection、alignItems和 justifyContent三個(gè)樣式屬性就已經(jīng)能滿足大多數(shù)布局需求。

React Native中的Flexbox的工作原理和web上的CSS基本一致，也存在少許差異。首先是默認(rèn)值不同：flexDirection的默認(rèn)值是column而不是row，而flex也只能指定一個(gè)數(shù)字值。

• Flex Direction

在組件的style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列，還是沿著豎直軸(column)方向排列呢？默認(rèn)值是豎直軸(column)方向。

class LotsOfStyles extends Component {
  render() {
    return(
      // 父容器設(shè)定很重要，如果父容器沒有設(shè)定width和height，也沒有設(shè)定flex，則父容器的尺寸為0
      <View style={{flex: 1, flexDirection: "row"}}>
        <View style={{flex: 1, backgroundColor: "powderblue"}}></View>
        <View style={{flex: 2, backgroundColor: "skyblue"}}></View>
        <View style={{flex: 3, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

運(yùn)行結(jié)果：

運(yùn)行結(jié)果.png

• Align Items

在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center、flex-end以及stretch。

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={{flex: 1, flexDirection: "column", justifyContent: "center", alignItems: "center"}}>
        <View style={{width: 100, height: 100, backgroundColor: "powderblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{width: 100, height: 100, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

運(yùn)行結(jié)果：

運(yùn)行結(jié)果.png

注意：要使stretch選項(xiàng)生效的話，子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例：只有將子元素樣式中的width: 100去掉之后，alignItems: 'stretch'才能生效。

class LotsOfStyles extends Component {
  render() {
    return(
      <View style={{flex: 1, flexDirection: "column", justifyContent: "stretch", alignItems: "center"}}>
        <View style={{height: 100, backgroundColor: "powderblue"}}></View>
        <View style={{height: 100, backgroundColor: "skyblue"}}></View>
        <View style={{height: 100, backgroundColor: "steelblue"}}></View>
      </View>
    );
  }
}

運(yùn)行結(jié)果：

運(yùn)行結(jié)果.png