在 React Native 中使用情感

Posted 2023-03-16

【中文标题】在 React Native 中使用情感

【英文标题】：Using Emotion with React Native

【发布时间】：2020-02-21 06:37:52

【问题描述】：

我想在 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，所以我试图找出区别。

【参考方案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

【讨论】：

另一个可能被误认为名字的包，你可能在找这个：Documentation the package emotion in NPM