标签：至少1个，最多5个
欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：
react-native-android的布局不同于以往的网页布局，采用的是一种组件的方式，使用js来定义样式表。接下来，我们会一起详细的了解这些react-native的样式，及所有样式的作用、用法。并且，我们将通过一些小例子，来实践这些样式。
1. react-native中的样式
打开我们之前创建的项目，我们看到，在最下方，是简单的布局样式。形式本身是javascript的对象形式。观其内容，则是我们熟悉的css样式。
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
而样式的应用也是web开发者比较熟悉的『内联style』的方式，如图1.1图1.1在希望应用的标签上，将style属性填写为我们创建的styles，这样就能将样式应用于我们的标签上了。
但是这里请注意，有一些细节还是和普通的css不一样的。
1. react-native的样式的属性名，需要使用驼峰方式。
2. react-native的样式应用于某一个组件上的话，该样式不会继承下去，而是只应用于设置该style的节点上（Text相关样式除外，Text嵌套的话，其文字属性也会应用于子元素）。
3. react-native的样式中width/height的单位是DP。并不是PX，这点请同学们注意一下，否则，按照设计图设计出来的东西会相当的难看。。。。。
4. 应用于组件的style属性上的样式，可以不止一个，可以使用多个，以逗号分隔。如 style={styles.a,styles.b}
5. 我们终于可以在样式中使用变量啦，比如我们想要一个元素的宽度等于屏幕的宽度，可以直接这么写：
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
width: Dimensions.get('window').width,
2. react-native中所有能用到的属性
接下来我们来看一下android中，所有我们能利用的上的属性吧：
2.1 背景相关(background)
backfaceVisibility
改元素背面面向屏幕时是否可见
backgroundColor 元素的背景色
2.2 布局相关(flex)
alignItems
flex布局元素中，子元素沿纵轴排列方式
flex元素中，本项元素的纵轴对其方式
这里指代flex-grow，描述了元素的宽度比例值
flexDirection 指代flex元素的排列方向
指代flex元素的换行方式，取值为 nowrap|wrap|wrap-reverse
justifyContent 指代flex元素在横轴上的排列方式，之后会进行详解。
2.3 布局相关(margin/padding/border)
marginBottom 底部留白
marginLeft
marginRight
marginVertical
上下外留白的简写，如果marginTop与marginBottom一样的话，可以直接用这个值代替
marginHorizontal 左右外留白的简写
borderColor
整体边框颜色
borderRadius
整体边框的圆角
borderWidth
整体边框的宽
borderStyle
边框样式 dotted solid double dashed等
borderBottomColor
底边框颜色
borderBottomWidth 底边框宽度
borderLeftColor 左边框颜色
borderLeftWidth 左边框宽度
borderRightColor 右边框颜色
borderRightWidth 右边框宽度
borderTopColor 上边框颜色
borderTopWidth 上边框宽度
borderBottomLeftRadius 左下角圆角边框
borderBottomRightRadius 右下角圆角边框
borderTopLeftRadius 上边框左圆角
borderTopRightRadius 上边框右圆角
padding 内留白
paddingBottom
paddingTop
paddingLeft
paddingRight
paddingHorizontal
paddingVertical
height 元素高度，包含padding与border
width 元素宽度，包含padding与border
2.4 定位相关
2.5 文字相关
fontFamily
fontWeight
textDecorationColor
textDecorationLine
textDecorationStyle
letterSpacing
lineHeight
2.6 阴影相关
shadowColor
阴影色IOS only
shadowOffset
阴影距离IOS only
shadowOpacity
阴影透明度IOS only
shadowRadius
阴影半径 IOS only
仰角 android only
resizeMode
transformMatrix
translateX
translateY
writingDirection
3 React属性逐个详解+示例
3.1 背景相关属性
3.1.2 backgroundColor 元素的背景色
backgroundColor相信大家并不陌生，就是一个元素的背景色，支持多种值的选择
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.colorBlock, styles.back1]}&&/View&
&View style={[styles.colorBlock, styles.back2]}&&/View&
&View style={[styles.colorBlock, styles.back3]}&&/View&
&View style={[styles.colorBlock, styles.back4]}&&/View&
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: '#fff',
colorBlock: {
height: 100,
width: 100,
// 普通的16进制值
backgroundColor: '#000'
// 颜色名称的简写
backgroundColor: 'blue'
// 颜色的RGB表示
backgroundColor: 'rgb(255, 0, 255)',
// 颜色的RGBA表示
backgroundColor: 'rgba(255, 0, 255, 0.5)',
效果如下,具体代码，参见本文后例子中的--index.android.js.backgroundColor(如图图3.2.1)图3.2.1
3.1.1 backfaceVisibility
改元素背面面向屏幕时是否可见
个人感觉这里reactNative在android下的实现的有点BUG，就是这个属性没有达到预期的效果，
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.rotateBlock, styles.back1]}&
&Text&Hello&/Text&
&View style={[styles.rotateBlock, styles.back2]}&
&Text&Hello&/Text&
&View style={[styles.rotateBlock, styles.back3]}&
&Text&Hello&/Text&
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: '#fff',
rotateBlock: {
marginTop: 50,
height: 100,
width: 100,
backgroundColor: '#0f0',
transform: [{rotateY: '135deg'}],
backfaceVisibility: 'visible'
backfaceVisibility: 'hidden',
transform: [{rotateY: '180deg'}],
backfaceVisibility: 'hidden',
transform: [{rotateY: '360deg'}],
出现的效果如图3.1.1：图3.1.1元素的背面也展现了出来。具体详见本文例子中的:index.android.js.backfaceVisibility。
3.2 布局相关(flex)
由于react-native的布局比较复杂，所以我们稍后会花费一整篇的篇幅，对其进行讲解。
3.3 布局相关(margin/padding/border)
height,width 不必多说。border,padding,margin的基本属性，做前端的同学也是轻车熟路了。这里，给原生开发，并且之前没有做过前端的同学们小小的科普一下。图3.3传统的网页设计的，使用css的盒子模型，来搭建元素的布局。如图3.3所示。一个元素由，内容、填充（内留白）、边框、边界（外留白）组成。对应上了我们这一组 布局相关的属性。
3.3.1 让我们来做一个盒子模型的示例
首先，我们设定一个View，宽高都为100。
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.rotateBlock, styles.back1]}&
&Text&Hello&/Text&
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: '#fff',
rotateBlock: {
height: 100,
width: 100,
backgroundColor: '#0f0',
效果如图3.3.1所示：图3.3.1展示了一个普通的100*100的正方形(如图3.3.1.1)。接着，我们为其加上50的padding。图3.3.1.1发现其宽高并没有变，表明我们这里的盒子模型其实有别与传统的盒子模型。它的宽高是包含了padding(内留白)在内的。我们接着，将border也加上宽度：
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: '#fff',
rotateBlock: {
height: 100,
width: 100,
padding: 30,
borderWidth: 10,
borderColor: '#000',
backgroundColor: '#0f0',
会发现，其实宽度*高度(100*100)也是包含了border的(如图3.3.1.2)。图3.3.1.2所以，我们react-native的盒模型，可以认为是border-box的模型。即，width或者height的设定值，包含了padding、border和content。这点，也请有前段开发经验的同学注意一下。我们再来看一看margin。
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: '#fff',
rotateBlock: {
height: 100,
width: 100,
padding: 30,
borderWidth: 10,
borderColor: '#000',
margin: 10,
backgroundColor: '#0f0',
效果如图3.3.1.3图3.3.1.3我们看到margin并不会被算到width、height的值当中。而是产生了外部留白。
3.3.2 特殊属性解释
这里请注意，marginvVerticl,marginHorizontal这两个属性是(marginTop,marginBottom)与(marginLeft,marginRight)的简写。
同理可证，paddingVertical,paddingHorizontal。这几个属性在css中没有，但是react提供了更为简洁的设置方法。
borderStyle，这个属性是设置border的展现样式的。其可取的值有：
'solid'(默认), 'dotted', 'dashed'，但是经过本人实验，在android环境下，几个属性貌似不能用。
具体详见本文例子中的：index.android.js.boxLayout文件。
3.4 定位相关
熟悉前端的同学肯定对position这个属性特别的亲切。这是网页布局中非常常见的一种定位方式。而对于不熟悉前端的同学来说呢，我们也会一起来看看，这组属性到底有什么作用。
一个元素如果不设定position去定位话，默认会形成文档流。每个元素会按顺序出现在文档流中，排到自己的位置上。
举个例子，我们有三个view，普通排列，正如我们所想，是一个挨着一个，顺序出现在被安排的位置上：
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.rotateBlock, styles.back1]}&
&Text&Hello1&/Text&
&View style={[styles.rotateBlock, styles.back2]}&
&Text&Hello2&/Text&
&View style={[styles.rotateBlock, styles.back3]}&
&Text&Hello3&/Text&
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
rotateBlock: {
height: 100,
width: 100,
backgroundColor: '#0f0',
效果如图3.4.1图3.4.1如果我们将第二个view的定位设定为absolute(绝对定位)，那么会变成什么样呢，如图3.4.2？
position: 'absolute',
图3.4.2我们发现，第二个view不见了，那么它去哪儿了呢？它已经脱离了我们的文档流，留下1和3，还规规矩矩的排在那里。我们为了找到第二个view，目前到底在哪儿，来尝试着更改其top和left。top/right/bottom/left决定了定位元素的位置。我们先调整其left为20，如图3.4.3
position: 'absolute',
backgroundColor: '#f00',
图3.4.3可见第二个元素虽然脱离了文档流但是还是在原先的位置上。只不过是被后面的第三个view给盖住了。这和我们在前端的常识不同。不过也可以理解为，此时的top与left。设定为了与自己未脱离文档流时候的top和left一致。
如果两个元素都设定为position:absolute,我们会看到排列顺序是按照文档流出现的顺序，下面的盖住上面的。但是如果我们像调整一下覆盖的顺序呢？我们在这里要介绍一下elevation，这个属性，这个属性比较奇特，他不仅可以控制覆盖顺序(就像z-index那样)，同时会产生一个阴影特效，稍后我们会讲到。
我们来实验一下，如图3.4.4：
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.shadowBlock, styles.back1]}&
&Text&Hello1&/Text&
&View style={[styles.shadowBlock, styles.back2]}&
&Text&Hello2&/Text&
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
shadowBlock: {
height: 100,
width: 100,
backgroundColor: '#0f0',
position: 'absolute',
position: 'absolute',
图3.4.4我们看到，文档流中后出现的hello2覆盖掉了hello1。那么我们将两个元素都设置上elevation属性，再来看看(如图3.4.5)：
position: 'absolute',
elevation: 1,
position: 'absolute',
图3.4.5我们看到，剧情发生了反转，有elevation的hello1，覆盖住了在文档流中后出现的hello2。其实hello2的elevation值，我们可以认为是0，
结论：当两个元素，显示上有重叠的时候，elevation大的元素，会覆盖掉elevation值较小的元素。
相应的例子代码，在本文例子中的index.android.js.elevation文件里。
上面，我们讨论了position为绝对定位的时候的排布规律，而如果position设定为relative的话，会怎样呢(如图3.4.6)？
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
rotateBlock: {
height: 100,
width: 100,
backgroundColor: '#0f0',
position: 'relative',
backgroundColor: '#f00',
图3.4.6我们看到，并没有发生什么异样，文档流还是那个文档流，but,如果此时，我们设置了left: 20的话，我们再来看看效果，如图3.4.7
position: 'relative',
backgroundColor: '#f00',
第二个view并未脱离文档流，而是按照自己之前的位置，进行了偏移。
如上述所示，其实各位发现react的定位，并不复杂。另外，元素默认的position，是relative，所以其实上面的例子，我们不用指定position，也能得到同样的效果：
backgroundColor: '#f00',
具体代码详见本文例子中的：index.android.js.boxLayout文件。
3.5 文字相关
react-native中，文字相关的样式设定，我们将会单独拿出一节来讨论。请各位关注，很快就会产出。
3.6 阴影相关
阴影可以让我们的应用变得更加的立体，呈现出更好的展示效果。让我们一起将阴影系列的属性一一实践。
shadowColor
shadowOffset
shadowOpacity
shadowRadius
这些属性，目前只适用于IOS系统，android的话，有一个替代属性elevation，这个属性影响着元素的z-index，就是绝对定位时的覆盖顺序(上面我们提到过)，也会在元素上产生一个阴影。
我们可以利用这个属性来设定阴影，elevation的值会影响阴影的offset(如图3.6.1)：
class hellowReact extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.container}&
&View style={[styles.shadowBlock, styles.back1]}&
&Text&Hello1&/Text&
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
shadowBlock: {
height: 100,
width: 100,
backgroundColor: '#0f0',
elevation: 5,
图3.6.1就这样，我们成功的看到了阴影，不过这个属性要慎用，因为它会影响z轴上的排列顺序。
具体代码详见本文例子中的：index.android.js.elevation2文件。
3.7 其他属性
由于其他属性较为散乱也较为复杂，我们接下来将专门花去一篇的篇幅，来逐一讲解这些属性，请各位看官关注我的博客，很快就会更新。
本文中提到的例子，均在下面的github上，需要的话请下载：
接下来，我会详细的带大家一起了解一下react-native的flex布局，不要走开，请关注我.......
如果喜欢本文请点击下方的推荐哦，你的推荐会变为我继续更文的动力。
以上内容仅代表笔者个人观点，如有意见请通知笔者。
0 收藏&&|&&6
你可能感兴趣的文章
1 收藏，1.1k
75 收藏，2.5k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：react-native之布局总结
宽度单位和像素密度
我们知道在中是用设备像素来作为单位的（后面又出现了百分比这么 一个概念），ios中后面也有了Auto Layout和1倍图，二倍图等概念（xib+storyboard）。然而react的宽度不支持百分比，那么React怎么提供尺寸的呢？PixelRatio，PixelRatio及像素密度，可以看看官方的介绍。
var image = getImage({
width: 200 * PixelRatio.get(),
height: 100 * PixelRatio.get()
&Image source={image} style={{width: 200, height: 100}} /&
flex的布局
我们知道一个p如果不设置宽度，默认的会占用100%的宽度， 为了验证100%这个问题， 做三个实验：
根节点上方一个View， 不设置宽度 固定宽度的元素上设置一个View， 不设置宽度 flex的元素上放一个View宽度， 不设置宽度
&Text style={[styles.text, styles.header]}&
根节点上放一个元素，不设置宽度
&View style={{height: 20, backgroundColor: '#;}} /&
&Text style={[styles.text, styles.header]}&
固定宽度的元素上放一个View，不设置宽度
&View style={{width: 100}}&
&View style={{height: 20, backgroundColor: '#;}} /&
&Text style={[styles.text, styles.header]}&
flex的元素上放一个View，不设置宽度
&View style={{flexDirection: 'row'}}&
&View style={{flex: 1}}&
&View style={{height: 20, backgroundColor: '#;}} /&
&View style={{flex: 1}}/&
来看一下运行的结果：
水平垂直居中
css 里边经常会将一个文本或者图片水平垂直居中，如果使用过css 的flexbox当然知道使用alignItems 和 justifyContent ，那如果用React Native如何实现呢？
&Text style={[styles.text, styles.header]}&
&View style={{height: 100, backgroundColor: '#;, alignItems: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
&Text style={[styles.text, styles.header]}&
&View style={{height: 100, backgroundColor: '#;, justifyContent: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
&Text style={[styles.text, styles.header]}&
水平垂直居中
&View style={{height: 100, backgroundColor: '#;, alignItems: 'center', justifyContent: 'center'}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/&
通常页面不是很复杂的时候，我们可以使用flex布局等分做到网格，复杂的那么就要用ListView实现，或者第三方控件。
等分的网格
&View style={styles.flexContainer}&
&View style={styles.cell}&
&Text style={styles.welcome}&
&View style={styles.cell}&
&Text style={styles.welcome}&
&View style={styles.cell}&
&Text style={styles.welcome}&
styles = {
flexContainer: {
// 容器需要添加direction才能变成让子元素flex
flexDirection: 'row'
height: 50,
backgroundColor: '#aaaaaa'
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
另一种方式可以参照我之前的实现： React Native实现九宫格效果
&Text style={styles.welcome}& 100px height &/Text&
&Image style={{height: 100}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
100px 高度， 可以看到图片适应100高度和全屏宽度，背景居中适应未拉伸但是被截断也就是cover。
&Text style={styles.welcome}& 100px height with resizeMode contain &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000'}]}&
&Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
contain 模式容器完全容纳图片，图片自适应宽高。
&Text style={styles.welcome}& 100px height with resizeMode cover &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000'}]}&
&Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.cover}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
stretch模式图片被拉伸适应屏幕
&Text style={styles.welcome}& set height to image container &/Text&
&View style={[{flex: 1, backgroundColor: '#fe0000', height: 100}]}&
&Image style={{flex: 1}} source={{uri: '/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} /&
绝对定位和相对定位
&View style={{flex: 1, height: 100, backgroundColor: '#;}}&
&View style={[styles.circle, {position: 'absolute', top: 50, left: 180}]}&
styles = {
backgroundColor: '#fe0000',
borderRadius: 10,
width: 20,
height: 20
和css的标准不同的是， 元素容器不用设置position：&absolute|relative& 。
&View style={{flex: 1, height: 100, backgroundColor: '#;}}&
&View style={[styles.circle, {position: 'relative', top: 50, left: 50, marginLeft: 50}]}&
padding和margin
我们知道在css中区分inline元素和block元素，既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。
&Text style={[styles.text, styles.header]}&
在正常的View上设置padding
&View style={{padding: 30, backgroundColor: '#;}}&
&Text style={[styles.text, {color: '#fefefe'}]}& Text Element&/Text&
&Text style={[styles.text, styles.header]}&
在文本元素上设置padding
&View style={{padding: 0, backgroundColor: '#;}}&
&Text style={[styles.text, {backgroundColor: '#fe0000', padding: 30}]}&
text 元素上设置paddinga
&Text style={[styles.text, styles.header]}&
在正常的View上设置margin
&View style={{backgroundColor: '#;}}&
&View style={{backgroundColor: '#fefefe', width: 30, height: 30, margin: 30}}/&
&Text style={[styles.text, styles.header]}&
在文本元素上设置margin
&View style={{backgroundColor: '#;}}&
&Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}&
text 元素上设置margin
&Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}&
text 元素上设置margin
先看看文字有哪些支持的style属性：
Attributes.style = {
color string
containerBackgroundColor string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum(&normal&, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight number
textAlign enum(&auto&, 'left', 'right', 'center')
writingDirection enum(&auto&, 'ltr', 'rtl')
Text的样式继承
实际上React-native里边是没有样式继承这种说法的， 但是对于Text元素里边的Text元素是可以继承的。到底是继承的最外层的Text的值呢，还是继承父亲Text的值呢？肯定是继承父亲Text的值。
&Text style={[styles.text, styles.header]}&
文本样式继承
&View style={{backgroundColor: '#;, padding: 10}}&
&Text style={{color: 'white'}}&
&Text style={{color: 'red'}} onPress={this.onPressTitle}&
文本元素{'\n'}
&Text&我是white还是red呢？{'\n'} &/Text&
&Text&我应该是white的&/Text&
针对上面的实例，我们做一个总结。
react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度。 基于flex的布局：
view默认宽度为100%
水平居中用alignItems, 垂直居中用justifyContent
基于flex能够实现现有的网格需求，且网格能够各种嵌套无bug 图片布局
通过Image.resizeMode来适配图片布局，包括contain, cover, stretch 三种模式
默认不设置模式等于cover模式
contain模式自适应宽高，给出高度值即可
cover铺满容器，但是会做截取
stretch铺满容器，拉伸
绝对定位和相对定位
定位相对于父元素，父元素不用设置position也行
padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom
文字必须放在Text元素里边
Text元素可以相互嵌套，且存在样式继承关系
numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
position在react-native里好像只有两个属性:absolute,relative!请问有没有办法呢?求助
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
以父组件为基准定位。例如这样写style={{
position: 'absolute',
bottom: 20,
backgroundColor: 'blue',
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：