《React Native高效开发》之styled-components

• 本文为 Marno 翻译，转载必须保留出处！
• 公众号【 aMarno 】，关注后回复 RN 加入交流群
• React Native 优秀开源项目大全：www.marno.cn

1、前言

React Native 的 Style 属性采用的是驼峰命名法，对于从原生转 RN 的开发者来讲可能不会感到陌生，可是对于习惯了中线或者下划线命名的 Web 开发者来讲，感受可能就不是那么顺手了。

今天推荐一个组件：styled-components，可让 Web 开发者继续使用熟悉的 CSS 命名方式在 RN 中进行样式的编写。固然这只是这个组件的一个特性，熟悉 ReactJS 的 Web 开发者可能知道，这个工具可让咱们更快速的进行组件封装，用事后就真的回不去了！并且最近更新到了 V2 版本，功能更强大，体积直接小了近一半。

网上搜了下相关的文章，基本都是讲在 React Web 中的使用，因此我今天就介绍下在 React Native 中的使用，来看下这个组件到底是如何帮咱们提升开发效率的。

不想看我啰嗦的也能够直接去看官方文档，地址以下↓↓↓

• 官网：www.styled-components.com/
• github：github.com/styled-comp…

2、入门

1.安装

npm install --save styled-components复制代码

2.简单使用

import styled from 'styled-components/native';

const StyledView = styled.View`
  flex:1;
  align-items:center;
  justify-content:center;
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

class MarnoTestStyledComponents extends Component {
  render() {
    return (
      < StyledView>
        < StyledText> Hello Marno! < /StyledText>
      < /StyledView>
    )
  }
}复制代码

这么看起来好像并无比直接写 StyleSheet 高效了多少，那让咱们接着往下看。我以为这个组件的好用之处，可能只有多用才能有所体会， 最为直观的就是会少了一些代码（好比在设置 padding 或 margin 的时候）。

3、进阶

1.拓展

const StyledTextExtend = StyledText.extend`
    color: tomato;
`;复制代码

2.参数传递

const StyledTextAdapt = styled.Text`
    color: ${props => props.primary ? 'green' : 'blue'};
`;

class MarnoTestStyledComponents extends Component {
  render() {
    return (
      < StyledView>
        < StyledTextAdapt>3.Hello Marno!< /StyledTextAdapt>
        < StyledTextAdapt primary>4.Hello Marno!< /StyledTextAdapt>
      < /StyledView>
    )
  }
}复制代码

3.缺省值

const StyledTextAttach = styled.Text.attrs({
    color:props=>props.color || '#00ff00',
})`
    height:30px;
    color: ${props => props.color};
`;

class MarnoTestStyledComponents extends Component {
  render() {
    return (
      < StyledView>
        < StyledTextAttach>6.Hello Marno< /StyledTextAttach>
        < StyledTextAttach color='#333333'>7.Hello Marno< /StyledTextAttach>
      < /StyledView>
    )
  }
}复制代码

3、高级

1.主题

const StyledTextTheme = styled.Text`
  color:${props => props.theme.color};
  background:${props => props.theme.background};
  border:${props => props.theme.border};
  border-radius:${props => props.theme.borderRadius};
  padding:10px 10px 10px 10px;
  margin:5px 10px;
`;

StyledTextTheme.defaultProps = {
    theme: {
        color:'#00ffff',
        background: 'white',
        border:'1px',
        borderRadius:'4px',
    }
}

const theme2 = {
    color:'white',
    background: 'black',
    border:'3px',
    borderRadius:'10px',
};

class MarnoTestStyledComponents extends Component {
  render() {
    return (
      < StyledView>
        < ThemeProvider theme={theme2}>
          < StyledTextTheme>9.Hello Marno< /StyledTextTheme>
        < /ThemeProvider>
      < /StyledView>
    )
  }
}复制代码

4、资源

github 上已经有不少 styled-components 衍生出来的框架，我在这里罗列几个，并不必定都和 RN 相关，可是能够帮咱们开下脑洞，了解下国外的大神是怎么使用这个工具来提升生产效率的。

• react-aria-tooltip:简单易用的 ReactJS tooltip 组件
• uiGradients: 建立漂亮好看的渐变背景的组件
• react-enhanced-form: 地球上最好的 react 表单组件
• reshake: 让组件摇晃起来的工具
• reactour: 操做引导组件
• react-progressive-bg-image: 相似 Medium 风格的渐进式加载背景图
• react-css-loaders: 收集了一些纯 CSS 编写的加载组件
• styled-components-grid: 为 styled-components 提供响应式网格布局的组件

5、结语

styled-components 的确是解决了咱们的一些痛点，可是使用了该组件后就不能畅快的使用 Webstrom 中的代码提示功能了，这对于接触 RN 不久的人来讲，可能实用性会下降一些。并且相比 React Web 来讲，目前对 React Native 的支持还稍微差了一些，不过做者确定会不断完善的。

最后声明一下，这并非 styled-components 中文使用指南 ，因此并无把所有功能罗列出来，若是看完文章对这个组件产生兴趣的，能够直接跳转到官方文档去学习，也欢迎扫码关注公众号后，加入 RN 交流群进行讨论。

demo地址：github.com/MarnoDev/rn…
(demo中仅写了 Android 版本)

---