首页 > 代码库 > View的介绍和运用 && FlexBox布局
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‘, // 设置背景颜色 width: 200, // 宽度 height: 300 // 高度 最后一个样式的,可以不写,其余的必须写,不然报错 }, innerStyle: { backgroundColor: ‘red‘, width: 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选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 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‘, // 设置背景颜色 width: 400, // 宽度 height: 300 // 高度 最后一个样式的,可以不写,其余的必须写,不然报错 }, innerStyle: { backgroundColor: ‘red‘, width: 100 }, innerStyle1: { backgroundColor: ‘yellow‘, width: 100 },});AppRegistry.registerComponent(‘ViewDemo‘, () => ViewDemo);
flexDirection: ‘column‘设置显示如下:
flexDirection: ‘row‘设置显示如下:
View的介绍和运用 && FlexBox布局