React Native学习笔记之Style和Size

本人始终认为最好最权威的学习资料就应该是官方文档

• Style官方文档
• Size官方文档
• CSS参考文档

Style学习

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

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

var Dimensions = require('Dimensions');

export default class StyleAndSize extends Component {
  render() {
    return (
      
          
            I am  the first Text
          
          
            I am the second Text
            
               I am insert Text
            
          

          
            
              后声明的属性会覆盖先声明的同名属性
            
          

          
          
          
          
      
    );
  }
}

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中，尺寸都是无单位的，表示的是设备像素密度无关的逻辑像素点。

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

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

Flex的配合使用

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

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

            
              我是第1个
            
            
              我是第2个
            
            
              我是第3个
            
          

          
            
              我是第1个
            
            
              我是第2个
            
            
              我是第3个
            
          

          
            
              我是第1个
            
            
              我是第2个
            
            
              我是第3个
            
          

  flexTestOne: {

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

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

欢迎讨论

Email: [email protected]

GitHub: https://github.com/LHCoder2016/ReactNativeNote.git