小庆带你快速熟悉React Native的布局方式

部分的css布局方式

React Native并没有完整实现CSS，而是使用JavaScript来给应用添加样式。

相对于传统的css书写方式不同的是，这里采用的是js语法式的css,类似如下这种写法，

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#60606f',
  },
  active: {
    borderWidth: 2,
    borderColor: '#0000ff',
  },
});

这个样式在组件中的使用方式如下：

<Text style={styles.base} />
<View style={styles.background} />

这里的style可以指定多个样式，用逗号分隔往后写就可以了。

在react native中支持如下的一些属性:

View可以使用如下的属性来修饰这个视图，在ios中view代表着一个原生的UIView控件及其子类的视图

backfaceVisibility enum('visible', 'hidden')
backgroundColor string
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number
elevation number

Image支持如下的属性来修饰

包含Transforms的属性
resizeMode Object.keys(ImageResizeMode)
backfaceVisibility enum('visible', 'hidden')
backgroundColor string
borderColor string
borderWidth number
borderRadius number
overflow enum('visible', 'hidden')
tintColor string
opacity number

Text支持如下的属性来修饰

包含所有view的属性
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
textDecorationColor string
writingDirection enum("auto", 'ltr', 'rtl')

Transforms支持如下的属性来修饰

transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] 

Flexbox的布局方式

React Native中不仅支持上述的部分css外，还支持web开发的弹性魔盒的布局方式。

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 
borderBottomWidth number 
borderLeftWidth number 
borderRightWidth number  
borderTopWidth number 
borderWidth number 
bottom number 
flex number 
flexDirection enum('row', 'column') 
flexWrap enum('wrap', 'nowrap') 
height number 
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 
left number 
margin number 
marginBottom number 
marginHorizontal number 
marginLeft number 
marginRight number 
marginTop number 
marginVertical number 
maxHeight number 
maxWidth number  
minHeight number 
minWidth number 
padding number 
paddingBottom number 
paddingHorizontal number 
paddingLeft number 
paddingRight number 
paddingTop number 
paddingVertical number 
position enum('absolute', 'relative') 
right number 
top number 
width number 

FlexBox的基础教程可以参见这篇博客的解析