Emotion.js如何在react-native中进行合成/条件样式设计？

Question

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

举个例子

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

但是，我不知道如何才能像在https://emotion.sh/docs/composition中使用react-native那样执行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的emotion/native中执行composition？

它非常简单，你只需要像这样使用style属性：

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的工作示例