ReactNative基础—Style and Flex

一、简介

每一个核心组件都自带一个style属性，用来添加组件的样式，比如字体大小、颜色、排列方式，组件的布局方式、位置等等。下面让我们一起来学习一下style样式的基本用法。

二、基础知识

• style属性名称和CSS一样，只不过命名规则使用驼峰法。
• style属性最简单的方式是JavaScript对象类型，也可写成数组类型；在数组类型中，优先加载最后的元素，因此可应用于继承中。
• style的声明方式：StyleSheet.create({})
• 组件尺寸：一种通过给予Width和Height具体的数值确定组件的尺寸，一种是通过flex属性使组件在可获得的空间里面任意的伸缩。
• flex：当flex:1时组件会充满所有可用的空间，如果一个父元素内有几个子元素，可使用flex属性按比例分割父元素的空间，flex的值越大，子元素所占的比例越大。如果父元素未定义Width或Height或Flex值，即父元素尺寸等于零，那么子元素将不会显示。

三、应用

• style的具体应用

import React, { Component } from 'react';import { StyleSheet, Text, View } from 'react-native';class LotsOfStyles extends Component {  render() {    return (      <View>        // 单独定义方式        <Text style={{ color: 'blue', fontSize: '12' }}></Text>        // 使用统一定义方式        <Text style={styles.red}>just red</Text>        <Text style={styles.bigblue}>just bigblue</Text>        // 数组方式        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>      </View>    );  }}// 统一定义style属性const styles = StyleSheet.create({  bigblue: {    color: 'blue',    fontWeight: 'bold',    fontSize: 30,  },  red: {    color: 'red',  },});

• FixedDimensions的具体应用

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';export default class FixedDimensionsBasics extends Component {  render() {    return (      <View>        // 通过给予width和height具体数值的方式确定组件的尺寸        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />      </View>    );  }}

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';export default class FlexDimensionsBasics extends Component {  render() {    return (      // 通过flex方式确定组件的尺寸      <View style={{flex: 1}}>        <View style={{flex: 1, backgroundColor: 'powderblue'}} />        <View style={{flex: 2, backgroundColor: 'skyblue'}} />        <View style={{flex: 3, backgroundColor: 'steelblue'}} />      </View>    );  }}

• 如果去掉父组件View的flex属性，子组件也不会显示出来；
• 如果父组件View换成height属性，那么子组件会在规定高的布局内按比例分配
• 无论组件子元素的布局方式是纵向还是横向，父组件都要设置高或者flex:1