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

  • 本文为 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 (
      
         Hello Marno! 
      
    )
  }
}

这么看起来好像并没有比直接写 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 (
      
        3.Hello Marno!
        4.Hello Marno!
      
    )
  }
}

3.缺省值

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

class MarnoTestStyledComponents extends Component {
  render() {
    return (
      
        6.Hello Marno
        7.Hello Marno
      
    )
  }
}

四、高级

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 (
      
        
          9.Hello Marno
        
      
    )
  }
}

五、资源

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 版本)


《React Native高效开发》之styled-components_第1张图片

你可能感兴趣的:(《React Native高效开发》之styled-components)