builderx_使用BuilderX作为设计器构建React Native应用

builderx

BuilderX is a screen design tool that codes React Native* for you. It generates beautiful, readable and editable code for the designs. Just design the components in your app, or import your Sketch file and it generates the corresponding code. You can hop between design and code with just a click owing to the amazing bi-directional flow in BuilderX.

BuilderX是一个屏幕设计工具，可为您编写React Native *。 它为设计生成美观，可读和可编辑的代码。 只需在您的应用程序中设计组件，或导入您的Sketch文件，它就会生成相应的代码。 由于BuilderX中惊人的双向流程，您只需单击即可在设计和代码之间进行切换。

问题 (The Problem)

It’s 2018, and Designers and Developers still don’t speak the same language. There is still a huge gap between the Design and Development phase. Designers and Developers work on different workspaces, tools, and most importantly, file formats. BuilderX is a revolutionary tool that seamlessly bridges this gap.

现在是2018年， 设计师和开发人员仍然不会讲相同的语言。 在设计和开发阶段之间仍然存在巨大差距。 设计人员和开发人员在不同的工作空间，工具，最重要的是文件格式上工作。 BuilderX是一种革命性的工具，可以无缝地弥补这一差距。

First, you will need to install BuilderX. Just go to builderx.io and install BuilderX.

首先，您将需要安装BuilderX。 只需转到builderx.io并安装BuilderX。

BuilderX界面 (BuilderX Interface)

BuilderX workspace is majorly divided in five sections:

BuilderX工作空间主要分为五个部分：

• Artboard - Artboard corresponds to a screen in your app. This is where you design awesome stuff.
  画板 -画板对应于您应用中的屏幕。 这是您设计很棒的东西的地方。
• Toolbar - The toolbar on the top contains some basic tools for your design like Shapes, Text, Images, etc. and also some useful actions like create group and create symbol.
  工具栏 -顶部的工具栏包含一些用于设计的基本工具，例如“形状”，“文本”，“图像”等，以及一些有用的操作，例如“创建组”和“创建符号”。
• Properties Panel - Properties panel on the right lets you adjust the properties of the selected layers and artboard.
  “属性”面板 -右侧的“属性”面板可让您调整所选图层和画板的属性。
• Left Panel - The left panel contains Layers and Symbols list. The layer list shows all the layers in your current Artboard. Symbols panel contains pre-built components as well as your project’s symbols that you can drag and use.
  左面板 -左面板包含“层和符号”列表。 图层列表显示当前Artboard中的所有图层。 “符号”面板包含预构建的组件以及您可以拖动和使用的项目符号。
• Code Editor - Code editor is useful for developers as it lets you make changes in your code directly and changes will be reflected in real-time.
  代码编辑器 -代码编辑器对开发人员很有用，因为它使您可以直接在代码中进行更改，并且更改将实时反映出来。

创建应用 (Creating the App)

In this tutorial, we will be creating a Hacker News App clone using BuilderX to design our components and then integrate the API calls with code generated to fetch the data in real-time and run the app on the device. First, we will create a new project from the BuilderX launch screen.

在本教程中，我们将使用BuilderX创建一个Hacker News App克隆，以设计我们的组件，然后将API调用与所生成的代码集成在一起，以实时获取数据并在设备上运行该应用程序。 首先，我们将在BuilderX启动屏幕上创建一个新项目。

On creating a new project, you see the project screen where the Artboard is shown in the centre as described in the previous section.

创建新项目时，您会看到项目屏幕，如上一节所述，画板显示在中间。

This is where we create our components. We will be saving the project as HackerNews-BuilderX.

这是我们创建组件的地方。 我们将项目另存为HackerNews-BuilderX。

First, let’s create a rect and give it a color, which in code would correspond to <View /> component in React Native.

首先，让我们创建一个rect并为其指定颜色，该颜色在代码中将与React Native中的<View />组件相对应。

Then, to create a header, we will insert some icons by using icon menu in top toolbar. After inserting the icon, we change it to menu icon. Similarly, we can design the whole header. By using flex or different alignments, we can adjust the icons in the header.

然后，要创建标题，我们将使用顶部工具栏中的图标菜单插入一些图标。 插入图标后，我们将其更改为菜单图标。 同样，我们可以设计整个标题。 通过使用flex或不同的对齐方式，我们可以调整标题中的图标。