Стилизованные системы не отображаются в Интернете, как на мобильных устройствах в React Native.

Question

Сегодня я начал проект с expo и хотел использовать styled-system. Я создал и использовал собственный компонент со Styled-системой. Хотя на мобильных устройствах это выглядит хорошо, стили не появятся в экспо-сети. В чем причина этого?

Чтобы показать код, который я написал в качестве примера, я написал текстовый компонент и домашний экран следующим образом.

Вот так это выглядит на iOS и в Интернете.

'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>
  );
}

Answer 1

Я решил, что вам нужно использовать 'styled-components/native'