- 說(shuō)實(shí)話，對(duì)于沒(méi)有前端基礎(chǔ)的我來(lái)說(shuō)，這還是有點(diǎn)費(fèi)勁的。但是對(duì)我來(lái)說(shuō)，正好也可以補(bǔ)習(xí)一點(diǎn)前端語(yǔ)言知識(shí)。
- 在日常開(kāi)發(fā)中，布局可以說(shuō)是必須課。一款成功的移動(dòng)應(yīng)用的必要條件就是用戶體驗(yàn)不一般，而用戶體驗(yàn)最主要的部分就是性能和UI。所以除了性能上的良好體驗(yàn)以外，最重要的就是界面布局。我們可以把性能比作是有趣的靈魂，而界面布局就是好看的皮囊。
- GitHub地址：https://github.com/AnswerXu/React-Native.git
1. 視圖邊框
- 視圖邊框，這是最常用的布局屬性了。在iOS開(kāi)發(fā)中，就是設(shè)置視圖的layer層的borderWidth、borderColor這兩個(gè)屬性，就可以在視圖周圍加上邊框效果。但是似乎在RN中，這個(gè)屬性變得更靈活了。
borderWidth: 5, // 設(shè)置上、左、下、右的邊框?qū)挾?borderTopWidth: 5, // 上邊框?qū)挾?borderLeftWidth: 10, // 左邊框?qū)挾?borderBottomWidth: 5, // 下邊框?qū)挾?borderRightWidth: 10, // 右邊框?qū)挾? borderColor: '#ff0000', // 設(shè)置上、左、下、右邊框顏色 borderTopColor: '#ffde00', // 上邊框顏色 borderLeftColor: '#00ffa3', // 左邊框顏色 borderBottomColor: '#ff8200', // 下邊框顏色 borderRightColor: '#ff008a', // 右邊框顏色
2. 尺寸
- 寬度和高度
width: 100, // 寬度 height: 100, // 高度 - 彈性(Flex)：在組件樣式中使用
flex可以使其在可利用的空間中動(dòng)態(tài)地?cái)U(kuò)張或收縮。一般而言我們會(huì)使用
flex:1來(lái)指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1，則這些子組件會(huì)平分父容器中剩余的空間。如果這些并列的子組件的flex值不一樣，則誰(shuí)的值更大，誰(shuí)占據(jù)剩余空間的比例就更大(即占據(jù)剩余空間的比等于并列組件件flex值的比)
3. 外邊距
- 用途：用于設(shè)置組件與組件之間的間距。
- 場(chǎng)景：想要設(shè)置自己在父組件的位置時(shí)使用。
- 注意：
- 第一個(gè)組件參照父組件，與父組件間的間距；其他組件間距是相對(duì)于上一個(gè)組件。
-
marginRight和width會(huì)沖突，如果設(shè)置了width,則marginRight無(wú)效
margin: 10, // 外邊距 marginTop: 10, // 上外邊距 marginLeft: 10, // 左外邊距 marginBottom: 10, // 下外邊距 marginRight: 10, // 右外邊距
4. 內(nèi)邊距
- 用途：用于設(shè)置子組件與自己之間的間距。
- 場(chǎng)景：想要設(shè)置子組件與自己的間距時(shí)使用。
- 注意：
- 第一個(gè)組件參照父組件，與父組件間的間距；其他組件間距是相對(duì)于上一個(gè)組件。
-
marginRight和width會(huì)沖突，如果設(shè)置了width,則marginRight無(wú)效
padding: 20, // 設(shè)置上、左、下、右的內(nèi)邊距 paddingTop: 20, // 設(shè)置上內(nèi)邊距 paddingLeft: 20, // 設(shè)置左內(nèi)邊距 paddingBottom: 20, // 設(shè)置下內(nèi)邊距 paddingRight: 20, // 設(shè)置右內(nèi)邊距
5. 相對(duì)定位和絕對(duì)定位
- 相對(duì)定位
position: ' relative', // 相對(duì)定位，參照自己位置定位 top：5, // 上邊緣 left: 5, // 左邊緣 bottom：5, // 下邊緣 right：5, // 右邊緣 - 絕對(duì)對(duì)定位
position: 'absolute', // 絕對(duì)定位，參照父組件位置定位 top：5, // 上邊緣 left: 5, // 左邊緣 bottom：5, // 下邊緣 right：5, // 右邊緣
組件渲染
export default class Layout_CSS extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.borderViewStyle}>
<Text style={styles.borderChildViewSytle}>
child0
</Text>
</View>
<View style={styles.borderViewStyle}>
<Text style={styles.borderChildViewSytle}>
child1
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
borderViewStyle: {
backgroundColor: '#00abff',
// size
width: 300,
height: 200,
// 外邊距
marginTop: 60,
marginLeft: 30,
// 內(nèi)邊距
paddingTop: 20,
paddingLeft: 50,
// 邊框?qū)挾? // borderWidth: 5,
borderTopWidth: 5,
borderLeftWidth: 10,
borderBottomWidth: 5,
borderRightWidth: 10,
// 邊框顏色
// borderColor: '#ff0000',
borderTopColor: '#ffde00',
borderLeftColor: '#00ffa3',
borderBottomColor: '#ff8200',
borderRightColor: '#ff008a',
},
borderChildViewSytle: {
backgroundColor: 'red',
width: 50,
height: 50,
fontSize: 15,
color: 'white',
textAlign: 'center',
alignItems: 'center',
},
});
-
效果圖
5A02BC36-F067-47EE-A6CA-C7B691A194CB.png
DCEE4D82-B7A8-4628-9145-B3DCF0B2E797.png
