Применение стилей в реагировании на нативный со стилизованными компонентами - PullRequest
Новая
       30

Применение стилей в реагировании на нативный со стилизованными компонентами

0 голосов
/ 19 октября 2018

У меня есть компонент Logo, к которому я пытаюсь применить ширину и высоту: 

import styledNative from "styled-components/native";
import {Image, View} from "react-native"
import companyIcon from "../svg/companyIcon.svg";

const Logo = () => (
  <Image source={{uri: companyIcon}} />;
);

const StyledLogo = styledNative(Logo)`
  width: 48px;
  height: 48px;
`;

const Header = () => {
  return (
    <View>
      <StyledLogo />
    </View>
  );
};

Это оставляет нам невидимый логотип с шириной 0. Документы Styled-componentsкажется, предлагает использовать переданное в className свойство (https://www.styled -components.com / docs / advanced # существующие-css ), однако это, похоже, для стандартных стилевых компонентов, а не реагировать-нативный / реагировать-native-web реализация, потому что она просто не передается моему компоненту.Когда я проверяю пропущенные реквизиты для Logo (путем их регистрации в консоли), - это объект стиля, но это не то, что я могу использовать, и в компоненте style нет особого упоминания об этомдокументация: 

style: Array(2)
  0: 91
  1: undefined
  length: 2

Так что я не совсем уверен, что с этим делать.Как компоненты могут быть стилизованы с помощью styled-components?

1 Ответ

0 голосов
/ 19 октября 2018

Вы не применяете свои стили к изображению.

То, что происходит сейчас, заключается в том, что ваш Logo компонент получает эти стилевые реквизиты, но не пропускает их. 

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} />;
);

То, что вы хотели бы сделать, это распределить ваши реквизиты Logo по вашему изображению, чтобы он получал необходимые данные. 

const Logo = (props) => ( // <-- containing style props
  <Image {...props} source={{uri: companyIcon}} />;  // <-- styles now applied to Image
);

Или же вы можете пройти только черезstyle-props. 

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} style={props.style}/>;
);

Редактировать: Похоже, вы передаете недопустимые стили.React Native ожидает, что передаваемые вами значения не будут иметь единиц измерения.Таким образом, ваши стили должны быть width: 48; вместо этого, отбрасывая ...px.

...