React native之路（五）Style

本来这一篇准备学习state，可是感觉state这东西理解容易，真正使用感觉太模糊，官方的例子也有点过于简单，所以准备学习完其他方面的知识在结合实例再搞清楚state的用法及原理，所以这篇先学习Style。
Style翻译过来就是样式，react-native中的style其实和js中的style没有什么大的区别，只不过把js中的一些用-连接的属性名称改成了小驼峰命名规则。
官方建议我们为了以后组件的可维护性以及扩展性组件的样式采用StyleSheet.create的方式来声明，例如：

const styles=StyleSheet.create(
  {
    style1:{
      fontSize:20,
      color:'green'
    }
  }
);

调用

 render(){
    return(
      <View>
      <Text style={styles.style1}>hello world!</Text>
      </View>
      );
  }

组件可以使用样式数组，但最终效果以数组中最后一个样式显示为准（如果属性重复会覆盖已有属性），比如现在有两个样式style1和style2

const styles=StyleSheet.create(
  {
    style1:{
      fontSize:20,
      color:'green'
    },
     style2:{
      color:'blue'
    }
  }
);

两个style均有一个color属性，如果这样使用

  render(){
    return(
      <View>
      <Text style={styles.style1}>style1样式</Text>
      <Text style={styles.style2}>style2样式</Text>
      <Text style={[styles.style1,styles.style2]}>style1和style2结合样式</Text>
      </View>
      );
  }

显示效果

可以看到第三行显示效果保留了style1的大小，但color属性值确是由style2设置而不是来自style1，也就是所说的属性继承关系。根据这个特点在开发中就可根据需求自定义各种style了。

目前react-native支持的最新style属性值如下：

width
height
top
left
right
bottom
minWidth
maxWidth
margin
marginVertical
marginHorizontal
marginTop
marginBottom
marginLeft
marginRight
padding
paddingVertical
paddingHorizontal
paddingTop
paddingBottom
paddingLeft
paddingRight
borderWidth
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
position
flexDirection
flexWrap
justifyContent
alignItems
alignSelf
overflow
flex
flexGrow
flexShrink
flexBasis
aspectRatio
zIndex
shadowColor
shadowOffset
shadowOpacity
shadowRadius
transform
transformMatrix
decomposedMatrix
scaleX
scaleY
rotation
translateX
translateY
backfaceVisibility
backgroundColor
borderColor
borderTopColor
borderBottomColor
borderLeftColor
borderRadius
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderStyle
opacity
elecation
color
fontFamily
fontSize
fontStyle
fontWeight
fontVariant
textShadowOffset
textShadowRadius
textShdowColor
letterSpacing
lineHeight
textAlign

textAlignVertical
includeFontPadding
textDecorationLine
textDecorationStyle
textDecorationColor
writingDirection

1 top, marginTop, paddingTop 的区别

top:组件目前位置相对于屏幕上方的距离，不会调整其他组件的位置，所以可能会与其他组件重叠
例如：

style1:{
  top:12,
  backgroundColor:'red'
},
 style2:{
  color:'blue'
}

  <View >
    <Text style={styles.style1}>style1样式</Text>
    <Text style={styles.style2}>style2样式</Text>
  </View>

显示效果为：

marginTop：组件距离父容器上方的距离，会调整其他组件的位置
例如：

style1:{
  marginTop:12,
  backgroundColor:'red'
},
 style2:{
  color:'blue'
}

显示效果为：

paddingTop ：组件内容据上内边距的距离，会向外扩展组件。
例如：

style1:{
  paddingTop:12,
  backgroundColor:'red'
},
 style2:{
  color:'blue'
}

显示效果为：

其他 padding，margin同理。
2 marginVertical 设置水平方向左右的margin，同marginLeft和marginRight叠加效果相同。同理marginHorizontal，paddingVertical，paddingHorizontal；
3 borderWidth边框宽度，也可以设置单个方向的边框，通过borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth，颜色同理；
4 position：两个属性，absolute（绝对）和relative（相对）默认为相对。
默认：

relative：