- 说实话，对于没有前端基础的我来说，这还是有点费劲的。但是对我来说，正好也可以补习一点前端语言知识。
- 在日常开发中，布局可以说是必须课。一款成功的移动应用的必要条件就是用户体验不一般，而用户体验最主要的部分就是性能和UI。所以除了性能上的良好体验以外，最重要的就是界面布局。我们可以把性能比作是有趣的灵魂，而界面布局就是好看的皮囊。
- GitHub地址：https://github.com/AnswerXu/React-Native.git
1. 视图边框
- 视图边框，这是最常用的布局属性了。在iOS开发中，就是设置视图的layer层的borderWidth、borderColor这两个属性，就可以在视图周围加上边框效果。但是似乎在RN中，这个属性变得更灵活了。
borderWidth: 5, // 设置上、左、下、右的边框宽度 borderTopWidth: 5, // 上边框宽度 borderLeftWidth: 10, // 左边框宽度 borderBottomWidth: 5, // 下边框宽度 borderRightWidth: 10, // 右边框宽度 borderColor: '#ff0000', // 设置上、左、下、右边框颜色 borderTopColor: '#ffde00', // 上边框颜色 borderLeftColor: '#00ffa3', // 左边框颜色 borderBottomColor: '#ff8200', // 下边框颜色 borderRightColor: '#ff008a', // 右边框颜色
2. 尺寸
- 宽度和高度
width: 100, // 宽度 height: 100, // 高度 - 弹性(Flex)：在组件样式中使用
flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用
flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件件flex值的比)
3. 外边距
- 用途：用于设置组件与组件之间的间距。
- 场景：想要设置自己在父组件的位置时使用。
- 注意：
- 第一个组件参照父组件，与父组件间的间距；其他组件间距是相对于上一个组件。
-
marginRight和width会冲突，如果设置了width,则marginRight无效
margin: 10, // 外边距 marginTop: 10, // 上外边距 marginLeft: 10, // 左外边距 marginBottom: 10, // 下外边距 marginRight: 10, // 右外边距
4. 内边距
- 用途：用于设置子组件与自己之间的间距。
- 场景：想要设置子组件与自己的间距时使用。
- 注意：
- 第一个组件参照父组件，与父组件间的间距；其他组件间距是相对于上一个组件。
-
marginRight和width会冲突，如果设置了width,则marginRight无效
padding: 20, // 设置上、左、下、右的内边距 paddingTop: 20, // 设置上内边距 paddingLeft: 20, // 设置左内边距 paddingBottom: 20, // 设置下内边距 paddingRight: 20, // 设置右内边距
5. 相对定位和绝对定位
- 相对定位
position: ' relative', // 相对定位，参照自己位置定位 top：5, // 上边缘 left: 5, // 左边缘 bottom：5, // 下边缘 right：5, // 右边缘 - 绝对对定位
position: 'absolute', // 绝对定位，参照父组件位置定位 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,
// 内边距
paddingTop: 20,
paddingLeft: 50,
// 边框宽度
// 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
