react-native学习一（引入styled-components:native样式）

• styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。

• 最简单的用法：

  import styled from 'styled-components'
  
  const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
  `;
  // 相当于  const Title = styled.h1(xx)
  const Wrapper = styled.section`
      padding: 4em;
      background: papayawhip;
  `;
      render () {
          return (
              <Wrapper>
                  <Title>Hello styled-components</Title>
              </Wrapper>
          )
      }
  

注意: 组件名要以大写开头 不然会被解析成普通标签

• 传递props

  const Button = styled.button`
      background: ${props => props.primary ? 'palevioletred' : 'white'};
      color: ${props => props.primary ? 'white' : 'palevioletred'};
      font-size: 1em;
      margin: 1em;
      padding: 0.25em 1em;
      border: 2px solid palevioletred;
      border-radius: 3px;
  `
  render(
      <div>
          <Button>Normal</Button>
          <Button primary>Primary</Button>
      </div>
  );
  

  在组件传递的props都可以在定义组件时获取到，这样就很容易实现定制某些风格组件