如果是第一个控件,margin将参照父控件,如果不是第一个控件,将参照上一个控件。
什么时候用{}:
包装对象的时候使用{};
表达式时候用{};
变量也需要使用{}包装起来,如:var str = @"hello",<Text>{str}</Text>;
包装组件标签的时候用{}。
注意:当设置了尺寸时候,marginRight和marginBottom可能就无效了。
只有一个子控件时候,使用css布局;
当布局很多子控件时时,就使用flex布局:
方向flexDirection(主轴):row、row-reverse、column、column-reverse;侧轴为与主轴垂直的方向
换行:flexWrap,默认情况下不换行
具体布局:justifyContent,有五个值:center/flex-start/flex-end/space-between(每个控件之间等间距)/space-around(每行第一个之前和最后一个之后也有间距)
侧轴方向布局:alignItems,决定控件在侧轴上的位置,有四个值:flex-start/flex-end/center/stretch
定义单个控件自己的侧轴布局:alignSelf,共五个值:auto(如果没有定义,就跟随父控件的alignItems,如果没有父容器,就为stretch)/flex-start/flex-end/center/stretch
在主轴上占据的份额:flex,根据占总flex的比例划分。
RN的组件属性Props和Statu
- App开发过程中少不了组件之间传值,在RN中,组件之间传值需要使用Props和State。
- Props(属性):一般用于自定义组件,大多数组件在创建时就可以使用各种参数来进行定制,用于定制的这些参数就成为Props。