在 React Native 中,樣式的編寫方式與 Web 上大致相同。它遵循 Web 上的 CSS 命名,但有一些差異和特點。
駝峰命名法:
在 React Native 的樣式中,屬性命名是用駝峰命名法。例如,background-color,在 React Native 中會是 backgroundColor。
style
樣式屬性:
所有React Native核心組件都接受 style
樣式屬性,其值是 JavaScript 的物件或是陣列。
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'blue', fontSize: 20 }}>Hello, React Native!</Text>
</View>
StyleSheet.create:
隨著樣式逐漸增多,用上面內聯樣式撰寫可能會影響到代碼的複用性和維護性。這時,可以使用 StyleSheet.create 來獨立樣式。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5'
},
text: {
color: 'blue',
fontSize: 20
}
});
合併與串聯樣式
多個樣式可以用陣列形式連接。需注意當陣列中有多個樣式時,後面的樣式將覆蓋前面的樣式(對於相同的屬性)。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
return (
<View style={styles.container}>
<Text style={[styles.text, styles.textHighlight, styles.redText]}>Hello, React Native!</Text>
<Text style={[styles.text, styles.greenText]}>Welcome to the world of mobile development!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'blue',
fontSize: 20,
},
textHighlight: {
textDecorationLine: 'underline',
fontSize: 25,
},
redText: {
color: 'red',
},
greenText: {
color: 'green',
},
});
export default App;
在上述範例中:
第一個 Text 組件先套用了 styles.text,然後是 styles.textHighlight,最後是 styles.redText。因此,文字的最終效果將是紅色、25像素大小、帶有下劃線的效果。
第二個 Text 組件先套用了 styles.text,然後是 styles.greenText,所以其文字會是綠色的。
不支援屬性與要留意之處
撰寫樣式時,要留意 React Native 不完全支援所有的 Web CSS 屬性,並且有時不同平台效果並不一致,例如
:hover
, :active
, :focus
和 ::before
、::after
在 React Native 中都不支援。在 React Native 中,尺寸屬性如 width, height, fontSize 使用的是無單位的值。
這樣的設計是因為 Android 和 iOS 的尺寸單位有所不同,React Native選哪個都不好,乾脆無單位,在哪個平台渲染就自動為對應的平台轉換適當的尺寸單位。
<View style={{ width: 100, height: 100, backgroundColor: 'gray' }}>
<Text style={{ fontSize: 16 }}>尺寸範例</Text>
</View>
在這個範例,Android上View的寬和高會被解讀為 100dp (density-independent pixels)。而fontSize 會被解讀為 16sp (scale-independent pixels)。而在IOS上所有的尺寸單位都會被解讀為 pt (points)。
另外,React Native 也支援以百分比設定寬高尺寸,不過需注意百分比必須使用字串格式,例如 "100%"。
React Native 主要採用在 Web 上普及的 FlexBox 佈局方式,並透過 Yoga 引擎將其轉換為原生佈局。FlexBox大部分前端開發者對此應該都不陌生,但考慮到有些人可能初次接觸,以下簡單介紹 FlexBox 的幾個概念,如果想暸解更多,網路上有很多寫得很好的FlexBox教學可以參考,像是六角學院Flexbox教學
React Native 的 FlexBox 和 Web 大致相同,但仍有些許差異需注意:
row
,但在React Native 預設是 column
,由上到下排列,這也是優先考慮到手機的設計。alignItems:'stretch'
;而在 Web 上,預設為 align-items:'flex-start'
。flex
可接受多個參數,例如:flex: 2 2 10%;
。但在 React Native 中,flex
只接受一個參數,代表比例。relative(相對位置):
React Native 中所有組件的position都預設為 relative。當我們給一個組件設置 top、bottom、left 或 right 值時,它會基於其在父組件中的位置移動。
absolute(絕對位置):
當你想要一個組件脫離常規流,並特定固定在某個位置時,可以將 position 設置為 absolute, 這樣就會使組件脫離常規流,方便將組件設置在特定位置。
https://www.readfog.com/a/1634095388417953792
React Native布局详细指南