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