1

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

PS-我知道实现背景的其他方法，但我只是试图让 react-native-svg 使用从 adobe XD 导出的简单基本案例，因为设计/原型非常容易，我想要它我的工具箱。

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

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

当前 react-native 版本：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;

我希望屏幕看起来类似于在 Adob​​e XD 中创建的设计，但它是一个白/黑屏幕。

4

0 回答 0