Question

我已经在Adobe XD中设计了一些屏幕。在Adobe XD中，有一个插件可以将设计导出为React / ReactNative组件。我已经导出了一个设计，在这种情况下只是一个背景，但是当我运行该应用程序时，屏幕显示为白屏或黑屏，有时会从白屏过渡到黑屏。影响此功能的因素是Adobe XD中的导出设置。

PS-我知道实现背景的其他方法，但是由于设计/原型设计很容易，我只是试图让react-native-svg与从adobe XD导出的简单基本案例一起工作，我想要在我的工具箱中。

从Adobe XD插件反应组件导出设置： 为React Native创建-使用大写字母修改SVG节点/使用带有react-native-svg导入的特定模板 删除尺寸-从根SVG标签中删除宽度和高度 forward ref -设置为true会将参考转发到根SVG标签

我尝试了所有合并，但没有显示设计。

当前反应本机版本：0.59.5 当前的react-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中创建的设计相似，但屏幕为白色/黑色。

从Adobe XD导出的组件在本机应用程序中显示为白屏或黑屏

0 个答案: