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>
    )
  }
}

同時(shí)也支持復(fù)雜樣式 (like transform)和簡(jiǎn)寫(xiě)(如 margin) 

注意flex的工作方式類似于 CSS 簡(jiǎn)寫(xiě), 而不是 React Native 中的flex用法. 設(shè)置 flex: 1 則會(huì)設(shè)置 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 也會(huì)報(bào)警.

NOTEv2 支持百分比. 為了實(shí)現(xiàn)這一目標(biāo),需要為所有簡(jiǎn)寫(xiě)強(qiáng)制指定單位. 如果要遷移到v2, a codemod is available.