styled-components ReactNative

styled-components 可以在 React-Native 中以同样的方式使用. 示例: Snack by Expo.

import React from 'react'
import styled from 'styled-components/native'

const StyledView = styled.View`
  background-color: papayawhip;
`

const StyledText = styled.Text`
  color: palevioletred;
`

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    )
  }
}

同时也支持复杂样式 (like transform)和简写(如 margin) 

注意flex的工作方式类似于 CSS 简写, 而不是 React Native 中的flex用法. 设置 flex: 1 则会设置 flexShrink为1.

Imagine how you'd write the property in React Native, guess how you'd transfer it to CSS, and you're probably right:

const RotatedBox = styled.View`
  transform: rotate(90deg);
  text-shadow-offset: 10px 5px;
  font-variant: small-caps;
  margin: 5px 7px 2px;
`

与 web-version 不同, React Native 不支持 keyframes 和 createGlobalStyle .使用媒体查询或是嵌套 CSS 也会报警.

NOTEv2 支持百分比. 为了实现这一目标,需要为所有简写强制指定单位. 如果要迁移到v2, a codemod is available.