在React Native中可以利用StyleSheet做到跟web的css很像的格式設定,但各項格式設定的寫法React Native跟css還是不太一樣的,今天就來把常用的格式設定做個整理。
React Native | css | 用途 |
---|---|---|
width | width | 設定元件寬度 |
height | height | 設定元件高度 |
backgroundColor | background-color | 設定背景顏色 |
React Native | css | 用途 |
---|---|---|
border | border | 設定邊線格式 |
borderWidth | border-width | 設定邊線寬度 |
borderBottomWidth | border-bottom-width | 設定下方邊線寬度(上、左、右邊依此類推) |
borderColor | border-color | 設定邊線顏色 |
borderRadius | border-radius | 設定圓角 |
React Native | css | 用途 |
---|---|---|
color | color | 設定文字顏色 |
fontSize | font-size | 設定文字大小 |
textAlign | text-align | 設定文字對齊 |
lineHeight | line-height | 設定行高 |
React Native | css | 用途 |
---|---|---|
shadowColor | box-shadow | 設定陰影顏色 |
shadowOffset | box-shadow | 設定陰影位置 |
shadowOpacity | box-shadow | 設定陰影透明度 |
shadowRadius | border-radius | 設定陰影圓角 |
React Native | css | 用途 |
---|---|---|
margin | margin | 設定外部間隔大小 |
marginTop | margin-top | 設定上方外部間隔大小(左、右、下依此類推) |
padding | padding | 設定內部間隔大小 |
paddingTop | padding-top | 設定上方內部間隔大小 |
justifyContent | justify-content | 設定水平的物件排列 |
alignItems | align-items | 設定垂直的物件排列 |
flexDirection | flex-direction | 設定彈性容器內元件垂直或水平排列 |
elevation | z-index | 設定層級 |
&小提示1:在React Native中,任何有關於文字的樣式設定只能設定給<Text>標籤,設定給其他標籤例如<View>標籤是沒有作用的(網頁是可以設定給<div>的)。
&小提示2:在React Native中,標籤預設就是彈性容器,但與網頁的彈性容器不同的是React Native的彈性容器內元件預設為垂直方向排列,而網頁的預設則是水平的。
希望這篇彙整對大家有幫助~