react-native - 在 React Native 中使用情感
问题描述
我想将 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>
);
};
我Invariant violation: Text strings must be rendered within a <Text> component
在组件的第 7 行得到一个。如果我尝试使用组件,也会发生同样的事情。
此外,同样的代码适用于styled-system
而不是@emotion/native
,所以我试图找出区别。
解决方案
您是否尝试在页面上添加一些情感?存在一个包@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
}}
/>
推荐阅读
- mysql - MySql 中有类似 FOR 循环的东西吗?
- git - 如何设置 TFS 2018 通过 SSH 从 Git 拉取源代码?
- rabbitmq - rabbitmq监控集群配置中的master节点
- angular - Angular 6 ngrx 为什么选择器获取具有多余属性的对象?
- html - Angular BehaviourSubject 的问题不能分配给类型错误
- docker - 不同 Docker Compose 服务的相同项目名称
- c# - 同时处理2个事件的情况如何处理?
- xcuitest - 如何同时查看 XCUITest 和我的应用程序的 NSLog 输出?
- arrays - 无法通过函数显示数组的第 n 个元素
- macos - 更改终端文本输出的颜色(macos)