Экспортированный компонент из Adobe XD отображает либо белый, либо черный экран в реактивном приложении - PullRequest
Новая
       11

Экспортированный компонент из Adobe XD отображает либо белый, либо черный экран в реактивном приложении

1 голос
/ 12 июля 2019

Я разработал несколько экранов в Adobe XD. В Adobe XD есть плагин, который экспортирует дизайн как компонент React / ReactNative. Я экспортировал дизайн, в данном случае просто фон, но когда я запускаю приложение, экран выглядит как белый или черный экран, иногда он переходит с белого экрана на черный. Факторы, влияющие на эту функцию, - это настройки экспорта в Adobe XD.

PS. Я знаю о других способах реализации фона, но я просто пытаюсь заставить реактивную-нативную SVG работать с простым базовым сценарием, экспортирующим из Adobe XD из-за того, как легко проектировать / создавать прототипы. хочу это в моем наборе инструментов.

Настройки экспорта React Component из плагина Adobe XD: создать для реагирования Собственный - изменить узлы SVG с помощью прописных букв / использовать специальный шаблон с импортом реагировать-native-svg удалить размеры - убрать ширину и высоту из корневого тега SVG forward ref - при установке true будет пересылать ref в корневой тег SVG

Я перепробовал все объединения, и ничто не отображает дизайн.

текущая реактивная версия: 0.59.5 текущая версия response-native-svg: 9.5.1

экспортируемый Adobe (сокращенный) дизайн как компонент реакции: 

import React from "react";
import Svg, {
  Defs,
  LinearGradient,
  Stop,
  ClipPath,
  Rect,
  G,
  Circle,
  Line
} from "react-native-svg";

const BackgroundComponent = () => (
   <Svg width={375} height={812} viewBox="0 0 375 812">
    <Defs>
      <LinearGradient
        id="a"
        x1={0.5}
        x2={0.5}
        y2={1}
        gradientUnits="objectBoundingBox"
      >
        <Stop offset={0} stopColor="#fff" />
        <Stop offset={1} stopColor="#ffb051" />
      </LinearGradient>
      <ClipPath id="c">
        <Rect className="a" width={375} height={812} />
      </ClipPath>
      <ClipPath id="e">
        <Rect width={375} height={812} />
      </ClipPath>
    </Defs>
  </Svg>
);

export default BackgroundComponent;

Я ожидаю, что экран будет похож на дизайн, созданный в Adobe XD, но это черно-белый экран.

...