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

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

一、前言

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

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

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

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

• 官网：https://www.styled-components.com/
• github：https://github.com/styled-components/styled-components

二、入门

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 的时候）。

三、进阶

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>
    )
  }
}

四、高级

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>
    )
  }
}

五、资源

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 提供响应式网格布局的组件

六、结语

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

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

demo地址：https://github.com/MarnoDev/rn_styled_demo
(demo中仅写了 Android 版本)