iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Mobile Development

30天用React native製作app!!系列 第 9

[蚊子的Day9]StyleSheet格式設定大彙整~React Native

  • 分享至 

  • xImage
  •  

在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的彈性容器內元件預設為垂直方向排列,而網頁的預設則是水平的。

希望這篇彙整對大家有幫助~


上一篇
[蚊子的Day8]按鈕製作~React Native
下一篇
[蚊子的Day10]頁面導覽Navigator-Stack Navigation~React Native
系列文
30天用React native製作app!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言