0

今天我开始了一个带有 expo 的项目，我想使用 styled-system。我使用 Styled-system 创建并使用了一个自定义组件。虽然它在移动设备上看起来不错，但风格并没有出现在世博会网站上。这是什么原因？

为了展示我编写的代码作为示例，我编写了文本组件和主屏幕，如下所示。

这就是它在 iOS 和 Web 上的外观。

'Text.js
import {Text as T} from 'react-native';
import styled from 'styled-components';
import {compose, color, size, typography, space} from 'styled-system';
const Text = styled(T)(compose(typography, space, color, size));
export default Text;

'Home.js
import React from "react";

import { Text, Input, Box, Button } from "../components/style";

export default function HomeScreen({ navigation }) {
  return (
    <Box flex={1} justifyContent="center" alignItems="center">
      <Text fontSize={21}>Search a movie</Text>
      <Input
        width="90%"
        height={70}
        px={20}
        fontSize={20}
        bg={"#ddd"}
        color="black"
        mt={10}
        placeholder="movie name"
        borderRadius="normal"
      />
      <Button
        width="90%"
        mt={30}
        bg="0.dark"
        height={70}
        borderRadius="normal"
        onPress={() => navigation.navigate("Details")}
      >
        <Text color="0.light" fontWeight="bold" fontSize={18}>
          Ara
        </Text>
      </Button>
    </Box>
  );
}
4

1 回答 1

0

我解决了，你必须使用'styled-components/native'

于 2020-11-14T20:24:35.343 回答