《React Native高效開發》之styled-components

Marno發表於2017-07-04
React Native
  • 本文為 Marno 翻譯，轉載必須保留出處！
  • 公眾號【 aMarno 】，關注後回覆 RN 加入交流群
  • React Native 優秀開源專案大全：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地址：github.com/MarnoDev/rn…
(demo中僅寫了 Android 版本)

相關文章