在 React Native 中使用情感

Question

我想在 React Native 中使用 Emotion。我能够让它与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