样式style
所有的核心组件都支持名为
style
的属性。此属性是一个JS对象，工作原理类似于CSS。
一般使用
StyleSheet.create
来集中创建样式以保持代码整洁。通常会让组件接收一个
style
的属性以便用于子组件。
const styles = StyleSheet.create({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
red: {
color: 'red',
复制代码
宽与高
可以简单通过设置
width
与
height
来指定组件的宽高。RN中尺寸没有单位，是相对于屏幕密度独立的单位点。
FlexBox Layout
可变尺寸
flex
在组件样式中使用
flex
以使组件可以基于可用空间灵活伸缩。
flex
默认在垂直方向进行伸缩，可以根据
flexDirection
来指定伸缩方向(水平方向为
row
)。
flex
可以接收一个参数。
父组件会在
flex
排布方向上，对所有子组件的
flex
值求和，然后把整体的尺寸按子组件对应
flex
值的比例进行分配。
flex
的四种取值：
column
，默认值
row-reverse
，水平反向
column-reverse
，垂直反向
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
复制代码
布局方向
React-Native默认采用从左往右方向布局
Justify Content
:
justifyContent
定义在容器内部主轴方向上如何排布子组件
flex-start
: 默认值，从容器主轴起始位置开始排布
flex-end
: 从容器主轴末尾位置开始排布
center
: 子组件居中排布
space-between
: 子组件之间等间距，不会在主轴两端设置额外的边距
space-around
: 子组件之间等间距，且主轴两边各留出1/2间距值
space-evenly
: 子组件与主轴两边的边距均相等
Align Items
:
alignItems
定义在容器副轴(主轴交叉轴)方向上如何排布子组件。该效果与
justifyContent
是类似的。
注
：此属性要求在容器主轴的副轴上，每一行的子组件至少要存在一个高度值。如果在一行上所有的子组件都未指定高度，则该行子组件都不会被显示。合理设置
alignItems
，可以做到各子组件尺寸的相互参照。
stretch
: 默认值，组件副轴方向尺寸，取该行整体的最大尺寸。此属性生效，对应组件在容器副轴方向不可设置固定尺寸值
flex-start
: 从组件所在行的副轴方向起点开始布局
flex-end
: 从组件所在行的副轴方向终点开始布局
center
: 在组件所在行副轴方向居中
baseline
: 在组件所在行的副轴方向基线对齐。每个子组件可以设置自身基线以便父容器用于布局
Align Self
alignSelf
与
alignItems
有相同的取值类型，不同的是此属性定义可以让子组件在父容器中在副轴方向独立于整体的排布方式而拥有单独的排布方式。例如，在某行上单一的子组件在该行居中，而其他同行的子组件起点对齐。
Align Content
当子组件排布支持换行(
flexWrap: true
)时，通过
alignContent
属性定义多行内容在副轴方向上的排布方式。
flex-start
: 副轴方向起点对齐
flex-end
: 副轴方向终点对齐(终点指该行子组件最大的尺寸位置)
stretch
: 副轴方向铺满整行(副轴方向设置固定尺寸，则此属性不生效)
center
: 副轴方向居中排布
space-between
: 贴紧两边，等行间距排布
space-around
: 两边留白，等行间距。留白为行间距一半。
注意
: 此属性只有父容器支持子组件多行排布时才会生效。如果同时设置了
alignItems
与此属性，布局可能不正确。
不要
在设置了
alignItems
的同时设置
alignContent
为
space-between
、
space-around
和
stretch
。此时系统计算的各行尺寸与该行最大尺寸的组件的尺寸并不一致。
Flex Wrap
flexWrap
用于定义当子组件在主轴上布局超出父容器尺寸时是否需要换行。当允许换行时，可以通过
alignContent
控制多行内容在副轴上如何布局。
枚举类型：
wrap
(支持换行),
nowrap
(不换行)
Flex Basis, Grow, Shrink
flexGrow
: 当主轴方向布局完所有的子组件后还有剩余空间时，是否对某个子组件进行放大。多个子组件同时设置此属性时，剩余空间将按比例进行分摊。此数值总和小于1时，只分摊对应比例的剩余空间。
flexShrink
: 当主轴方向布局空间不足时，对指定的子组件尺寸进行压缩，取值范围0~1，默认值为1(不压缩)。如果父容器支持换行，此属性不起作用。
flexBasis
: 相当于在主轴方向给定固定数值(直接设置固定
width
&
height
)。
View的Style属性
背景色与透明度
backgroundColor
：视图背景色
opacity
：不透明度
Direction
direction
属性用来定义子组件在水平方向的布局流方向。默认会从上一级继承。可以设置为
ltr
(从左至右，默认)或
rtl
(从右至左)。
经测试，不论设置为何种方向，
left
始终等同于
start
，
right
始终等同于
end
。
Offset
设置组件的坐标偏移值。
top
: 顶部偏移量
bottom
: 底部偏移量
left
/
start
: 距起点边界偏移量
right
/
end
: 距终点边界偏移量
同一方向上同时设置了相反的两个偏移值，则只有距离轴线起点边界的值会生效。例如，同时设置
left
和
right
，则只采用
left
的值。
Margin
Margin是指当组件自身尺寸可变时，距指定边界的保留距离。当指定方向的尺寸固定时，设置margin相当于设置偏移量，且只有沿轴线布局方向起始边界的属性设置有效。例如：子组件的宽度固定，水平方向的布局为
ltr
，则只有设置
marginStart
/
marginTop
会对该组件有效，正值为向正向偏移，负值向反向偏移。
marginTop
: 当自身垂直方向尺寸可变时，距离顶部的保留距离
marginBottom
:当自身垂直方向尺寸可变时，距离底部的保留距离
marginLeft
/
marginStart
:当自身水平方向尺寸可变时，距离左边的保留距离
marginRight
/
marginEnd
:当自身水平方向尺寸可变时，距离右边的保留距离
marginHorizontal
: 水平方向两边的边距，相当于设置等值的
marginLeft
和
marginRight
marginVertical
: 竖直方向两边的边距，相当于设置等值的
marginTop
和
marginBottom
margin
:当自身尺寸水平/竖直方向均可变时，设置自身内容区域距四边的等值边距
Padding
padding
用于指定组件内部布局内容的边界保留距离。该边界距离不计入布局子组件的区域。例如，组件宽度为300，指定
paddingLeft: 50, paddingRight: 50
，则实际可布局的宽度为200.
paddingTop
: 顶部留白
paddingBottom
: 底部留白
paddingLeft
/
paddingStart
: 距起点边界留白
paddingRight
/
paddingEnd
: 距终点边界留白
paddingHorizontal
: 水平方向边界留白，相当于设置等值的
paddingLeft
和
paddingRight
paddingVertical
: 竖直方向边界留白，相当于设置等值的
paddingTop
和
paddingBottom
padding
: 边界留白，相当于设置四边的边界等值留白
width
: 宽
height
: 高
minWidth
: 最小宽度
maxWidth
: 最大宽度，仅设置此值，宽度取0
minHeight
: 最小高度
maxHeight
: 最大高度，仅设置此值，高度取0
绝对位置与相对位置
position
：枚举类型，取值：
absolute
：如果想要设置某个组件在其父组件中的位置绝对固定，可以将
position
设置为此值
relative
：在RN中所有组件的位置默认都是相对的。可以通过组件树(
component tree
)来布局各个组件之间的相对位置关系
弹性布局相关属性
具体属性说明见上述
Flexbox Layout
flexDirection
justifyContent
alignItems
alignContent
alignSelf
flexGrow
flexShrink
：
flexWrap
View的边界样式设置属性
borderWidth
：边线宽度
borderStyle
：边线类型，分为：
solid
(实线)，
dotted
(点线)，
dashed
(虚线)
borderTopWidth
：顶部边线宽度
borderBottomWidth
：底部边线宽度
borderLeftWidth
：左边边线宽度
borderRightWidth
：右边边线宽度
borderColor
：边线颜色
borderTopColor
：顶部边线颜色
borderBottomColor
：底部边线颜色
borderLeftColor
/
borderStartColor
：左边边线颜色
borderRightColor
/
borderLeftColor
：右边边线颜色
borderRadius
：圆角半径。注，如果圆角不可见，可以尝试设置
overflow: 'hidden'
borderTopLeftRadius
/
borderTopStartRadius
：左上角圆角半径
borderTopRightRadius
/
borderTopEndRadius
：右上角圆角半径
borderBottomLeftRadius
/
borderBottomStartRadius
：左下角圆角半径
borderBottomRightRadius
/
borderBottomEndRadius
：右下角圆角半径
注：
TextInput
不支持设置边线宽度和圆角
React Native中父组件访问子组件
React Native中，父组件访问自身的子组件，需要在父组件的
render
方法中为子组件指定引用关系，通过引用来访问。有如下两种方式：
通过回调函数将子组件设置为父组件的成员属性
render() {
return (
<View ref={ view => this.someChildView = view } >
</View>
为子组件设置标识符，通过父组件的refs集合来访问
render() {
return (
<View ref='someIdentifier' />
ReactNative开发圈
React.js
JavaScript
- 1.8w
-
Robot_A03
React Native
- 2.0w
-
恋猫de小郭
React Native
Android
- 2991
-
ZacJi
JavaScript
React Native
- 1.9w
-
squarezw
Android
Flutter
React Native
- 4.9w
-
芦苇科技App技术团队
React Native
- 1.3w
-
amandakelake
React.js
GitHub
- 9028
-
涛涛tao锅
