Emotion.js 如何在 react-native 中做组合/条件样式？

Question

https://github.com/emotion-js/emotion/tree/master/packages/native

举个例子

    style={css`
      border-radius: 10px;
    `}

但是，我无法弄清楚如何使用 react-native

像在 https://emotion.sh/docs/composition 中所做的那样 composition

    <div css={[danger, base]}>

我也不能像 https://emotion.sh/docs/styled

那样做条件样式

const Button = styled.button`
  color: ${props =>
    props.primary ? 'hotpink' : 'turquoise'};
`

即使我能做到，他们也使用两种不同的方法，一种使用 css ，一种使用 styled 。我怎样才能用react-native同时得到这两个？

Answer 1

问题1：如何在React Native中做到composition in emotion/native？

这真的很简单，您只需要像这样使用样式属性：

const style1 = css`
  font-size: 40px;
`

const color = css`
  color: red;
`

// And then in your component you can pass the all your style objects 
// in an array to style property
<Text style={[fontSize, color]}>Hello world</Text>

问题 2：React Native emotion/native 中的条件样式？

const Description = styled.Text`
    font-size: ${props =>  props.fontSize !== undefined ? props.fontSize : "40px"};
  color: hotpink;
`

<Description fontSize={"60px"}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Description>

这是一个工作示例 snack

Emotion.js 如何在 react-native 中做组合/条件样式？

Emotion.js how to do composition / conditional styling in react-native?

emotion

reactjs

react-native