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

第 12 屆 iThome 鐵人賽

DAY 9

Mobile Development

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

12th鐵人賽

humichen

2020-09-15 00:39:38

4711 瀏覽

分享至

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

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