style-components的简单使用

1.安装

npm install -S styled-components

2.使用

import styled from "styled-components";

3.简单例子

<Avatar>
 <Iconfont name={"icon-yonghu" size={40}/>
</Avatar>

//样式
const Avatar = styled.View`
 width:70; 
 height:70;
 borderRadius:70;
 backgroundColor:${Colors.whiteColor};
 opacity:0.7;
 marginRight:15;
`;

4.拓展样式

例子：

<Item>
 <Row>
  <Icon item>
   <Iconfont name={"icon-ruzhu2" size={28}/>
  </Icon>
  <Name>大师入驻</Name>
 </Row>
 <Icon>
  <Iconfont name={"icon-you" size={14}/>
 </Icon>
</Item>
//样式
const Icon =styled.Text`
  color:${props=> props.item ?Colors.themeColor:Colors.blackColor};
  paddingRight:${props=>props.item?15:0};
  lineHeight: 50;
`; 

5.继承样式

export const Header = Row.extend`
 justifyContent: ${"space-between"};
 height: 75;
 backgroundColor: ${Colors.themeColor};
 paddingTop: 20;
 paddingHorizontal: 15;
`;

目前只用到过这些基础的用法，以后在补充高级用法。