View的介绍和运用 && FlexBox布局

开始我们今天的项目学习啦~~~~~~

1> 第一步当然是创建项目啦:

进入终端: 创建ViewDemo项目

命令如下啦,你看懂了对吧...嘻嘻!!!

2>View的介绍和运用

项目安装创建成功后,用webStorm打开项目,开始编写代码看效果啦~~~

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text>其实我是存在!!!</Text>
          <View style={styles.innerStyle}>
          <Text>其实我是里面存在的View!!!</Text>
          </View>
      </View>
    );
  }
}

//

使用StyleSheet.create来集中定义组件的样式

const styles = StyleSheet.create({
  container: {
    //flex: 1,
    backgroundColor: 'green',  // 设置背景颜色
     200,  // 宽度
    height: 300  // 高度 最后一个样式的,可以不写,其余的必须写,不然报错
  },
  innerStyle: {
    backgroundColor: 'red',
     100,
    height: 200
  },
});

// 注册应用(registerComponent)后才能正确渲染

// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册

AppRegistry.registerComponent('ViewDemo', () => ViewDemo);

弹性（Flex）宽高#

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

3>FlexBox布局:

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。

Flex Direction#

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

Justify Content#

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

Align Items#

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的 50去掉之后，alignItems: 'stretch'才能生效。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.innerStyle}>
          <Text>其实我是里面存在的View!!!</Text>
          </View>
          <View style={styles.innerStyle1}>
          <Text>其实我是里面的下面的View!!!</Text>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'green',  // 设置背景颜色
     400,  // 宽度
    height: 300  // 高度 最后一个样式的,可以不写,其余的必须写,不然报错
  },
  innerStyle: {
    backgroundColor: 'red',
     100
  },
  innerStyle1: {
    backgroundColor: 'yellow',
     100
  },
});

AppRegistry.registerComponent('ViewDemo', () => ViewDemo);

    flexDirection: 'column'设置显示如下:

    flexDirection: 'row'设置显示如下: