在 React Native 中,你並不需要學習什么特殊的語法來定義樣式。我們仍然是使用 JavaScript 來寫樣式。
所有的核心組件都接受名為style的屬性。這些樣式名基本上是遵循了 web 上的 CSS 的命名,
只是按照 JS 的語法要求使用了駝峰命名法,例如將background-color改為backgroundColor。
style屬性可以是一個普通的 JavaScript 對象。這是最簡單的用法,因而在示例代碼中很常見。
你還可以傳入一個數組——在數組中位置居后的樣式對象比居前的優先級更高,
這樣你可以間接實現樣式的繼承。
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<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({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
指定寬高
最簡單的給組件設定尺寸的方式就是在樣式中指定固定的width和height。
React Native 中的尺寸都是無單位的,表示的是與設備像素密度無關的邏輯像素點。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
}
彈性(Flex)寬高
在組件樣式中使用flex可以使其在可利用的空間中動態地擴張或收縮。一般而言我們會使用flex:1來指定某
個組件擴張以撐滿所有剩余的空間。如果有多個並列的子組件使用了flex:1,則這些子組件會平分父容器中
剩余的空間。如果這些並列的子組件的flex值不一樣,則誰的值更大,誰占據剩余空間的比例就更大
(即占據剩余空間的比等於並列組件間flex值的比)。
值得注意的事情是:
組件能夠撐滿剩余空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height,
也沒有設定flex,則父容器的尺寸為零。其子組件如果使用了flex,也是無法顯示的。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
)
}
}
使用Flexbox布局
我們在 React Native 中使用 flexbox 規則來指定某個組件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局結構。
一般來說,使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經能滿足大多數布局需求。
React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致,當然也存在少許差異。
首先是默認值不同:flexDirection的默認值是column而不是row,而flex也只能指定一個數字值。
Flex Direction
在組件的style中指定flexDirection可以決定布局的主軸。子元素是應該沿着水平軸(row)方向排列,
還是沿着豎直軸(column)方向排列呢?默認值是豎直軸(column)方向。
Justify Content
在組件的 style 中指定justifyContent可以決定其子元素沿着主軸的排列方式。子元素是應該靠近主
軸的起始端還是末尾段分布呢?亦或應該均勻分布?對應的這些可選項有:flex-start、center、flex-end、
space-around、space-between以及space-evenly。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// 嘗試把`justifyContent`改為`center`看看
// 嘗試把`flexDirection`改為`row`看看
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
Align Items
在組件的 style 中指定alignItems可以決定其子元素沿着次軸(與主軸垂直的軸,比如若主軸方向為row,則次軸方向為column)
的排列方式。子元素是應該靠近次軸的起始端還是末尾段分布呢?亦或應該均勻分布?
對應的這些可選項有:flex-start、center、flex-end以及stretch。
注意:要使stretch選項生效的話,子元素在次軸方向上不能有固定的尺寸。
以下面的代碼為例:只有將子元素樣式中的width: 50去掉之后,alignItems: 'stretch'才能生效。
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class AlignItemsBasics extends Component {
render() {
return (
// 嘗試把`alignItems`改為`flex-start`看看
// 嘗試把`justifyContent`改為`flex-end`看看
// 嘗試把`flexDirection`改為`row`看看
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{height: 50, backgroundColor: 'skyblue'}} />
<View style={{height: 100, backgroundColor: 'steelblue'}} />
</View>
);
}
};
本質就是flex布局
更多布局知識見這篇文檔:https://reactnative.cn/docs/layout-props/