Style学习

在React Native中，我们仍然是使用JavaScript来写样式。基本组件都有style属性。这些样式名基本上是遵循了CSS的命名，只是按照JS的语法要求使用了驼峰命名法，如：background-color改为backgroundColor。

一般我们按顺序声明属性和使用Style属性，因为声明的属性会覆盖先声明的同名属性。

var Dimensions = require('Dimensions');

export default class StyleAndSize extends Component {
  render() {
    return (
      <View style={styles.containerView}>
          <Text style={styles.firstText}>
            I am  the first Text
          </Text>
          <Text style={styles.secondText}>
            I am the second Text
            <Text>
               I am insert Text
            </Text>
          </Text>

          <View style={[styles.previousProperty, styles.lastProperty]}>
            <Text style={{color: 'white', textAlign: 'center'}}>
              后声明的属性会覆盖先声明的同名属性
            </Text>
          </View>

          <View style={styles.firstView}>
          </View>
          <View style={styles.secondView}>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  containerView: {

    flex: 1,
    backgroundColor: 'gray',
  },
  firstText: {

    width: Dimensions.get('window').width,
    height: 20,
    backgroundColor: 'yellow',
    fontSize: 12,
    textAlign: 'center',
    marginTop: 20,
  },
  secondText: {

    width: Dimensions.get('window').width,
    height:20,
    backgroundColor: 'blue',
    fontSize: 12,
    textAlign: 'left',
    color: 'red',
  },
  previousProperty: {

    width: Dimensions.get('window').width,
    height: 30,
    backgroundColor: 'red',
  },
  lastProperty: {

    backgroundColor: 'black',
  },
  firstView: {

    width: 200,
    height: 50,
    backgroundColor: 'yellow',
  },
  secondView: {

    width: 200,
    height: 50,
    backgroundColor: 'blue',
  },
});

Size学习

其实size并不是组件的一个属性，而与主见size直接相关的属性是width和height。在React Native中，尺寸都是无单位的，表示的是设备像素密度无关的逻辑像素点。

给组件设置尺寸也是一种常见的模式，比如要求在不同尺寸的屏幕上都显示成一样的大小。

<View style={{width: 100, height: 100, backgroundColor: 'yellow'}}>
</View>

当然我们在使用width和height的同时还经常配合Flex使用。

Flex的配合使用

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

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

<View style={styles.flexTestOne}>
            <Text style={{backgroundColor: 'red', color: 'white', flex: 1}}>
              我是第1个
            </Text>
            <Text style={{backgroundColor: 'yellow', color: 'red', flex: 1}}>
              我是第2个
            </Text>
            <Text style={{backgroundColor: 'green', color: 'yellow', flex: 1}}>
              我是第3个
            </Text>
          </View>

          <View style={styles.flexTestTwo}>
            <Text style={{backgroundColor: 'red', color: 'white', flex: 1}}>
              我是第1个
            </Text>
            <Text style={{backgroundColor: 'yellow', color: 'red', flex: 0.5}}>
              我是第2个
            </Text>
            <Text style={{backgroundColor: 'green', color: 'yellow', flex: 0.25}}>
              我是第3个
            </Text>
          </View>

          <View style={styles.flexTextThree}>
            <Text style={{backgroundColor: 'red', color: 'white', flex: 1}}>
              我是第1个
            </Text>
            <Text style={{backgroundColor: 'yellow', color: 'red', flex: 0.5}}>
              我是第2个
            </Text>
            <Text style={{backgroundColor: 'green', color: 'yellow', flex: 0.25}}>
              我是第3个
            </Text>
          </View>

  flexTestOne: {

    width: Dimensions.get('window').width,
    height: 100,
    backgroundColor: 'blue',
  },
  flexTestTwo: {

    width: Dimensions.get('window').width,
    height: 100,
    backgroundColor: 'yellow',
  },
  flexTextThree: {
    
    backgroundColor: 'pink',
  },