Использование эмоций с React Native - PullRequest
Новая
       22

Использование эмоций с React Native

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

Я хочу использовать Emotion с React Native. Я смог заставить его работать с styled-components, но не emotion. Я также использую styled-system для настройки своей системы пользовательского интерфейса.

Я настраиваю систему стиля следующим образом: 

import React from 'react';
import * as N from 'react-native';
// import styled from 'styled-components';
import styled from '@emotion/native';
import {
    compose,
    space,
    color,
    layout,
    typography,
    flexbox,
    border,
    background,
    position,
    grid,
    shadow,
    buttonStyle,
    colorStyle,
    textStyle
} from 'styled-system'

const themed = key => props => props.theme[key]

// const types = variant
const View = styled(N.View)(
    compose(
        space,
        color,
        layout,
        typography,
        flexbox,
        border,
        background,
        position,
        grid,
        shadow,
        buttonStyle,
        colorStyle,
        textStyle,
        themed('SSN')
    )
)

const Text = props => <View as={N.Text} {...props} />
const Image = props => <View as={N.Image} {...props} />
const TextInput = props => <View as={N.TextInput} {...props} />
const ScrollView = props => <View as={N.ScrollView} {...props} />
const Picker = props => <View as={N.Picker} {...props} />
const Slider = props => <View as={N.Slider} {...props} />
const Switch = props => <View as={N.Switch} {...props} />
const FlatList = props => <View as={N.FlatList} {...props} />
const SectionList = props => <View as={N.SectionList} {...props} />
const ActivityIndicator = props => <View as={N.ActivityIndicator} {...props} />
const Alert = props => <View as={N.Alert} {...props} />
const Modal = props => <View as={N.Modal} {...props} />
const StatusBar = props => <View as={N.StatusBar} {...props} />

const Button = ({ children, color, fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, fontStyle, ...props }) => (
    <View as={N.TouchableOpacity} {...props}>
        <View as={N.Text} color={color} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight} lineHeight={lineHeight} letterSpacing={letterSpacing} textAlign={textAlign} fontStyle={fontStyle} >{children}</View>
    </View>
)

export {
    View, Text, Image, TextInput, ScrollView, Picker, Slider, Switch, FlatList, SectionList, ActivityIndicator, Alert, Modal, StatusBar, Button
}

Затем я пытаюсь отобразить базовый компонентвот так: 

import React from 'react';
import { Text, View, Button } from '../styled-system';

export const TestStyledSystem = () => {
  return (
    <View justifyContent="center" alignItems="center">
      <Text>Hello! </Text>
    </View>
  );
};

Я получаю Invariant violation: Text strings must be rendered within a <Text> component в строке 7, в компоненте. То же самое происходит, если я попробую это с компонентом.

Кроме того, этот же код работает с styled-system вместо @emotion/native, поэтому я пытаюсь выяснить разницу.

...