Question

我想将Emotion与React Native一起使用。我能够将其与styled-components一起使用，但不能与emotion一起使用。我还使用styled-system来设置UI系统。

我正在建立一个这样的样式系统：

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

在组件的第7行得到一个Invariant violation: Text strings must be rendered within a <Text> component。如果我尝试使用组件，也会发生相同的情况。

此外，相同的代码也可以使用styled-system而不是@emotion/native，所以我试图找出区别。

Answer 1

您是否尝试在页面上添加一些情感？存在一个包@ emotion / native。

类型：npm install @ emotion / core @ emotion / native进行安装。

并声明一个const作为样式表，例如： const emotionLogo = 'https://cdn.rawgit.com/emotion-js/emotion/master/emotion.png'

然后使用：

<Image
  source={{
  uri: emotionLogo,
  height: 150,
  width: 150
}}
/>

Documentation in NPM

在React Native中使用Emotion

1 个答案: