将情感与React Native结合使用

Question

我想在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 @native/core@native/native to install。

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

然后使用：

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

Documentation in NPM