React Native的View组件和Flexbox的使用

在看view组件之前，我们先了解下JSX语法，React核心机制之一是虚拟DOM，可以在内存中创建虚拟的DOM元素，通过对DOM的模拟，最大限度地减少与DOM的交互。
例子：
var btn=document.createElement("BUTTON"); btn.className = 'btn'; var t=document.createTextNode("CLICK ME"); t.className = 't'; btn.appendChild(t)

但是虚拟DOM可读性不那么好，React就发明了JSX，就是我们熟悉的HTML语法来创建虚拟DOM。实际上在打包阶段，JSX已经编译成javaScript,对性能是无影响的，是很直观的语法糖。（语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。）


class Demo extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }

如果你想了解更多JSX的知识，可以看http://www.runoob.com/react/react-jsx.html，如果想看一些例子，可以看这里https://blog.csdn.net/tianzhw/article/details/78812475；下面我们一起看下View组件吧。

View 作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、<div></div>还是android.view.View，是所有组件的父组件。

View的style属性

	Flexbox...
	ShadowProp#style...
	Transforms...
	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')
	android elevation number
	(限Android)使用Android原生的 elevation API来设置视图的高度（elevation）。
	这样可以为视图添加一个投影，并且会影响视图层叠的顺序。此属性仅支持Android5.0及以上版本。

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  View,
  StyleSheet,
} = React;
 
var Demo= React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.box}>
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container:{
    flexDirection:'row',      
    padding:20
  },
  box: {
    backgroundColor:'red',
    flex:1
  },
});
AppRegistry.registerComponent('Demo', () => Demo);

显示出的样式

Flexbox：
之前的页面中，界面搭建根据CSS来的，是基于盒子模型，依赖display，position，float属性，但是对于一些特殊布局例如垂直居中，这样的布局是不方便的。
所以一种全新的针对Web和移动开发的布局出现了，那就是Flex布局，可以简单、完整、响应式的实现各种布局，目前浏览器都支持，所以现在可以放心使用。
FlexBox：是弹性盒模型，布局父盒子和子盒子的关系。在布局时，要知道主轴和次轴的区别(盒子的排列方向)。想改变项目的排列方向，用的是flexDirection属性。

flexDirection 值为：

row：主轴为水平方向，起点在左边。
column(默认值)：主轴为垂直方向，起点在上边。
（在React Native中主要使用上面两种）
row-reverse：主轴为水平方向，起点在右边。
column-reverse：主轴为垂直方向，起点在下边。

justify-content属性:定义了项目在主轴上的对齐方式。
具体对齐方式与轴的方向有关。 值为：

flex-start（默认值）：左对齐
flex-end：右对齐
flex-end：右对齐
center：居中center：居中
space-between：两端对齐，项目之间的间隔都相等。space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

alignItems 定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”,值为：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flexWrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap(默认值)：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。（和wrap相反）

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。根据父盒子的大小来计算子盒子的宽度。比例的方式动态计算大小。
宽度=弹性宽度（父盒子）*（flex-grow/sum(flex-grow)）

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

参考网站：
https://www.jianshu.com/p/64cf6966d5fa
https://www.jianshu.com/p/31248003f375

React Native的View组件

React Native的View组件和Flexbox的使用

View的style属性

猜你喜欢