关于JSX
- React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素
- React利用虚拟DOM来减少对实际DOM的操作从而提升性能
- 在JavaScript中嵌入XML结构的语法,于是就有了JSX，利用我们熟悉的HTML语法来创建虚拟DOM，在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响
关于FlexBox
- 通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性
- Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间
- React native中的FlexBox是这个规范的一个子集
Flexbox的常用属性
- 组件中存在两根轴：水平的主轴和垂直轴
- 在组件的style中指定
flexDirection可以决定布局的主轴 - 组件内部的所有控件的布局是水平布局还是垂直布局只需要控制父视图的
flexDirection即可
flexDirection
默认值是主轴是纵向的，即
flexDirection为column通过修改style中的
flexDirection为row
justifyContent
决定其子控件沿着主轴的排列方式
//center,
//flex-start,
//flex-end,
//space-around 伸缩项目会平均地分布，俩端保留一半的空间
//space-between 俩端对齐，控件之间间隔相等
alignItems
决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式
//flex-start
//flex-end
//center
//stretch(默认)
flexWrap
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap:(默认值)：不换行
wrap：换行，第一行在上方
Flexbox的元素属性
flex
- 一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间
- 如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间
- 如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）
- 注：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的
alignSelf
align-self属性允许单个子控件有与其他控件不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
// flex-start
// flex-end
// center
// auto(默认)目前所有控件设置的是居中，若第一个view想要改变位置，只需要在style中设置alignSelf为flex-start，就会改变其位置
其他布局
尺寸
- width
- height
边距
- left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
- top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
视图边框
- borderBottomWidth 底部边框宽度
- borderLeftWidth 左边框宽度
- borderRightWidth 右边框宽度
- borderTopWidth 顶部边框宽度
- borderWidth 边框宽度
- borderColor 个方向边框的颜色
- borderColor 边框颜色
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
borderBottomWidth:30,
borderLeftWidth:30,
borderRightWidth:30,
borderTopWidth:30,
borderWidth:10,
borderColor:'blue',
},
});运行效果:
外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空间
- margin 外边距
- marginBottom 下外边距
- marginHorizontal 左右外边距
- marginLeft 左外边距
- marginRight 右外边距
- marginTop 上外边距
- marginVertical 上下外边距
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red'，
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
margin:30,
},
});运行效果:
内边距
元素的内边距在边框和内容区之间
- padding 内边距
- paddingBottom 下内边距
- paddingHorizontal 左右内边距
- paddingLeft 做内边距
- paddingRight 右内边距
- paddingTop 上内边距
- paddingVertical 上下内边距
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
//内边距
padding:30,
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
},
});运行效果：
定位(position)
设置元素的定位方式，为将要定位的元素定义定位规则。通过position，enum(‘absolute’, ‘relative’)属性设置
- absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
注意：结论：通常情况下设置position和absolute，定位的效果是一样的，但是如果父组件设置了内边距，position会做出相应的定位改变，而absolute则不会。