【Facebook的UI开发框架React入门之七】多View布局与样式Style简介(iOS平台）-goodmao

最新推荐文章于 2021-12-15 20:32:51 发布

goodmao

最新推荐文章于 2021-12-15 20:32:51 发布

阅读量737

点赞数 1

分类专栏： iOS_iPhone_iPad 文章标签： React app iOS javascript react.native

本文链接：https://blog.csdn.net/maoyingyong/article/details/46563971

版权

iOS_iPhone_iPad 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

---------------------------------------------------------------------------------------------------

React.native是facebook开源的一套基于JavaScript的开源框架，

很方便用来开发移动设备的app。

而且，方便及时更新app的UI与数据，也很方便部署。

goodmao希望帮助大家迅速上手掌握！

----------------------------------------------------------------------------------------------------

参考：

样式Style： http://facebook.github.io/react-native/docs/view.html#style

视图View： http://facebook.github.io/react-native/docs/style.html#content

颜色参考：http://www.w3school.com.cn/html/html_colors.asp

源码参考： Layout.h/.c文件

----------------------------------------------------------------------------------------------------

我们这一节继续介绍UI的布局与样式 Style。

本节介绍下多个视图View的样式。

一、采用下面的例子来介绍：

//1.设置模式
'use strict'; 

//2.导入库
var React = require('react-native'); 


//3.定义变量添加依赖项
var {
  AppRegistry,
  StyleSheet,
  View,
} = React;

//4.创建组件类
var HelloReact = React.createClass({
  //组件的渲染方法
  //设置视图 View
  render: function() {
    return (
      <View style = {{backgroundColor: 'gray', width: 300, height:300, }}>
              <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
      </View>
    );
  }
});

//5.注册
AppRegistry.registerComponent('HelloReact', () => HelloReact);

二、多个视图View的常用属性

（1）边缘距离

【区别】

margin：是本View视图边框，与其他视图（非子视图）的距离。

padding：是本View视图的内容（子视图），与本视图边框的距离。

1. 距离其他视图（非子视图）的边线距离

属性： margin, marginTop, marginBottom, marginLeft, marginRight

类型：浮点数，可以为负数。

注意：若周围无其他视图，则是相对于父视图的边界线的距离

margin: 相对左边和顶部视图，左边和顶部的距离

marginTop: 相对上部视图，顶部的距离

marginBottom: 相对下部视图，底部的距离

marginLeft: 相对左边视图，左边的距离

marginRight: 相对右边视图，右边的距离

marginVertical: 同 marginTop

marginHorizontal: 同 marginLeft

2. 设置子视图距离本视图的边线距离

属性： padding, paddingTop, paddingBottom,

paddingLeft, paddingRight, paddingVertical, paddingHorizontal

类型：浮点数，可以为负数。

作用：同1，不同之处在于，所有paddingX的属性值，都是对当前视图的子视图而言的。

【示例】：

a.布局

  var HelloReact = React.createClass({ //创建组件类

  //组件的渲染方法
  //设置视图 View
  render: function() {
    return (
      <View style = {{backgroundColor: 'gray', 
                                width: 300, height:300, 
                     marginHorizontal: 50,
                          paddingLeft: 20, 
                           paddingTop: 50,
                        flexDirection: 'row',
                    }}>

        <View style = {{backgroundColor: 'blue', width: 50, height: 50}}/>        
      </View>
    );
  }
});

b.效果图

（2）子视图的排列

1.子视图的排列方向

属性： flexDirection

类型：字符串

取值：' row' 按行排列；

' column' 按列排列，默认是按列排列。

例如：flexDirection: 'row',

2.子视图的对齐方式-垂直方向

属性： justifyContent 垂直方向

类型：字符串，

取值：' center', 子视图垂直居中排列；

' flex-end', 子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；

' space-around', 子视图平均分布。

' space-between', 子视图平均分布。两端保留子视图与子视图之间间距大小的一半。

例如：justifyContent: ' center', //垂直居中

参考： http://caibaojian.com/flexbox-guide.html

http://caibaojian.com/demo/flexbox/justify-content.html

【示例】：

a.样式

同上例，参数：justifyContent: ' flex-end'

<View style = {{backgroundColor: 'gray', 
                          width: 300, height:300, 
                            top: 20,  
                  flexDirection: 'row', //按行
                 justifyContent: 'flex-end', //子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）
               }}>

      <View style = {{backgroundColor: 'blue',   width: 50, height: 50}}/>        
      <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
      <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/>
</View>

b.效果

【示例】：

a.样式

同上例，参数：justifyContent: ' space-between', //平均分布

b.效果

【示例】：

a.样式

同上例，参数：justifyContent: ' space-around', //平均分布

b.效果

3.子视图的对齐方式-水平方向

属性： alignItems 水平方向

类型：字符串，

取值：' center', 子视图居中排列；

' flex-end', 子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；

' stretch', 子视图被拉伸

例如：alignItems: 'center', //水平居中

【示例】：

a.样式

同上例，参数：

flexDirection: ' column', //按列

alignItems:' center', //子视图居中排列；

b.效果

a.样式

同上例，参数：

flexDirection: ' column', //按列

alignItems:' flex-end', //子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；

b.效果

a.样式

      <View style = {{backgroundColor: 'gray', 
                                width: 300, height:300, 
                                  top: 20,  
                        flexDirection: 'column',  //按列
                           alignItems: 'stretch', //子视图被拉伸                       
                              }}>

            <View style = {{backgroundColor: 'blue',              height: 50}}/>        
            <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
            <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/>
      </View>

b.效果

注意：对应的子视图，不设置宽度 width，则会被拉伸。

注意：对应的子视图，如果设置了width: 50，所以不会被拉伸。

注意：若方向修改为按行排列row，则没有设置高度的子视图，会将高度拉伸

a.样式

    <View style = {{backgroundColor: 'gray', 
                              width: 300, height:300, 
                                top: 20,  
                      flexDirection: 'row', //按列
                         alignItems:'stretch',  //子视图被拉伸                       
                   }}>

            <View style = {{backgroundColor: 'blue',   width: 50,           }}/>        
            <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>
            <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/>
    </View>

b.效果

---------------------------------------------

补充说明：

React中的样式属性，跟CSS中的有所不同，

可以查看官方文档，

也可以直接看源码：

文件位置：React.xcodeproj项目中， React->Layout->Layout.c

注意：视图View的所有属性，可以参看源码分析

或者参考文档说明： React-Doc-View

<View>

在RCTView.h源码中，可以看到：RCTView继承了UIView

Valid keys: [
"width",
"height",
"top",
"left",
"right",
"bottom",
"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",
"flex",
"transform",
"transformMatrix",
"rotation",
"scaleX",
"scaleY",
"translateX",
"translateY",
"backgroundColor",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"borderRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"opacity",
"overflow",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius"

]