Emotion.js, как сделать композицию / условное моделирование в реактивно-нативном? - PullRequest
Новая
       6

Emotion.js, как сделать композицию / условное моделирование в реактивно-нативном?

0 голосов
/ 10 октября 2019

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

приводит пример 

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

Однако я не могу понять, как я могу сделать composition, как это было сделано в https://emotion.sh/docs/composition с помощьюnative 

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

Также я не могу сделать условное стилирование, как это было сделано в https://emotion.sh/docs/styled

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

Даже если бы я мог это сделать, они используют два разных метода, один из которых css одиниспользуя styled. Как я могу получить два одновременно с реагировать на родной?

1 Ответ

0 голосов
/ 10 октября 2019

Вопрос 1: Как сделать composition в emotion/native в React 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: Условный стиль в emotion/native в React 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>

Вот рабочий экзамен в виде закуски

...