小字号内联样式
2外联样式 在组件里指向外面的样式
大字号外联样式
3样式具有覆盖性 如果定义相同属性的样式后面会覆盖前面的样式例如后面是红色前面是蓝色样式最终是现实的蓝色
红色被大蓝覆盖了
4样式具有组合性 例如颜色颜色跟字体样式组合
案例代码
import React, { Component } from react;import { AppRegistry, StyleSheet, Text, View } from react-native;class LotsOfStyles extends Component {render() {return (just redjust bigblue大蓝被红色覆盖了红色被大蓝覆盖了 小字号内联样式 大字号外联样式);}}const styles StyleSheet.create({bigblue: {color: blue,fontWeight: bold,fontSize: 30,},red: {color: red,},bigFontSize:{fontSize:40,},orange:{color:orange,}});AppRegistry.registerComponent(HelloWorld, () > LotsOfStyles);
上面已经展示了独立样式类了那么样式类创建很简单我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的就跟上面的代码一样。
三、Flexbox布局
其实这样的css样式作为web开发者一用就会那么说说布局的事儿。Flexbox是css3里面引入的布局模型-弹性盒子模型旨在通过弹性的方式来对其和分布容器中内容的空间使其能够适应不同的屏幕宽度。React Native中的Flexbox是这个规范的一个子集。除去margin, padding, position等大家熟悉的web布局的话最为重要的就是flexbox目前支持的属性如下,有6个 
2flexDirection 
3flexWrap是否换行 
