如何使不规则设计响应本机响应？

Question

我想创建一个主屏幕设计，其中的图标垂直倾斜（不是属性堆叠设计）。这些导航图标也通过黑色粗连接线连接。我尝试使用绝对位置，但在不同的分辨率下，图标未对齐或那些图像未达到全屏边缘。您能建议我们如何创建完全适合各种分辨率的设计吗？

Answer 1

您将在RN中度过一个非常有趣的时光，但有可能。您可以在样式中使用transform属性来应用旋转。

在这里检查：https://facebook.github.io/react-native/docs/transforms#transform

Answer 2

我尝试获取屏幕尺寸并使用绝对位置来定位每个元素，但是在不同的手机中它仍然会失真。 如果有人还在寻找答案，我可以使用svg解决。 （不确定是否是最佳解决方案）。 如果您没有使用expo，则需要使用react-native-svg。它已经包含在博览会中。然后，您可以使用sketch / adobe illustrator将复杂的设计创建为svg。现在，使用任何文本编辑器编辑svg图像并复制代码。 “ react-native-svg”支持大多数标准svg标记，但有细微差别（您可以从文档中获取）。

 <Svg height={height} width={width} viewBox="150 90 650 806">
     <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <G id="Group" transform="translate(1.000000, 0.000000)">
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(400.223611, 262.930718) rotate(-45.000000) translate(-400.223611, -262.930718) " x="440.723611" y="300.930718" width="41" height="46"></Rect>
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(481.794679, 552.516504) rotate(-45.000000) translate(-481.794679, -552.516504) " x="461.794679" y="525.516504" width="40" height="54"></Rect>
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(486.235804, 697.148232) rotate(45.000000) translate(-486.235804, -697.148232) " x="464.735804" y="671.648232" width="43" height="51"></Rect>
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(488.244426, 399.637825) rotate(45.000000) translate(-488.244426, -399.637825) " x="466.744426" y="366.637825" width="43" height="66"></Rect>
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(363.430718, 723.930718) rotate(-45.000000) translate(-363.430718, -723.930718) " x="343.430718" y="704.930718" width="40" height="38"></Rect>
            <Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(498.284271, 856.748737) rotate(-45.000000) translate(-498.284271, -856.748737) " x="475.784271" y="835.248737" width="45" height="43"></Rect>
</G></G></Svg>

这是一些用于在图像中创建这些连接线的示例代码。在svg中，您可以轻松创建倾斜的图形并固定其位置。它将根据屏幕分辨率自动响应。