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

0.223字数 901阅读 4266
  • 本文为 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 中的使用,来看下这个组件究竟是如何帮我们提高开发效率的。

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

二、入门

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 相关,但是可以帮我们开下脑洞,了解下国外的大神是怎么使用这个工具来提高生产效率的。

六、结语

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

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

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


推荐阅读更多精彩内容