请注意，本教程基于在 Mendix modeller 版本 9.24.0。其他版本可能有所不同。

硬件需求

要理解本教程的内容，你需要具备 React Native 的基本知识，以及如何在 Mendix Studio Pro。如果您是初次接触原生移动应用设计，请阅读来自 Mendix 学院 第一。

这篇文章是关于什么的

在这篇文章中，我们将介绍如何修改 Mendix 默认小部件可为您的原生移动应用创建直观的用户界面。作为专家服务团队的用户体验顾问，我经常收到这些请求。

这篇文章是什么 不是 关于我们

请注意，本文并非关于如何创建自定义原生移动应用小部件的教程。根据小部件的复杂程度，这可能需要更长的时间（和更大的预算），对于某些客户来说，这可能不是一个选择。

这篇文章的目的是证明我们仅使用 React Native 就能获得相当令人满意的结果。

本博文中显示的所有用户界面均为我自己创作。

教训

以下是我们将重点关注的三种风格：

第 1 课：顶部栏部分的扩展

第 2 课：带放大镜的搜索栏

第 3 课：叠加元素

第 1 课：顶部栏部分的扩展

我收到的有关原生项目的常见请求之一是扩展顶部栏部分。这允许用户包含有关页面内容的说明。以下是结果示例：

步骤 1：在建模器中设置主题结构

主题模块： 在开始设计应用的样式之前，请确保您已为该应用创建了主题模块。如果您不确定如何操作，请参阅 Mendix 学院。

建立新页面：在这种情况下，我将其重命名为“背景”。

第 2 步：向元素添加类

在“背景”页面上，围绕页面说明创建一个容器并赋予它一个类。

在同一页面上，我添加了内容来演示当有其他元素时顶部栏的外观。

在主题模块中，在“native”下创建一个新的 JS 文件并重命名，例如“extension.js”。这符合保持文件夹结构井然有序和文件可识别的最佳实践。

步骤 3：实现元素的样式

创建顶部栏扩展的关键是将其连接到状态栏，中间不留空隙。在“topBarExtension”类中，将“marginTop”设置为 0。

// - top bar extension section background
export const topBarExtension = {
  container: {
    marginTop: 0,
    paddingTop: 12,
    paddingBottom: 25,
    width: "100%",
    backgroundColor: "#586F63"
  }
}

请随意定制其他元素以达到您选择的风格。

创建一个新的文件“card.js”。这用于为卡片添加环绕每个后续元素的样式。

在“card.js”文件中，添加“popCard”类：

// - the card that wraps around each subsequent element
export const popCard = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

确保将新创建的文件导入到“main.js”文件中：

最终结果

奖金

另一种常见的样式是让主要内容部分重叠顶部栏扩展。以下是最终结果的预览：

为了实现这一点，我们需要延长顶部栏扩展的填充，以便后续元素不会覆盖顶部栏部分的内容。

步骤 1：更新建模器

第 2 步：更新代码

以下是顶部栏扩展的更新代码。我给它添加了一个不同的类“topBarExtensionLong”，并将其添加到同一个“extension.js”文件中。

// - top bar extension for the overlapping card style
export const topBarExtensionLong = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 65,
width: "100%",
backgroundColor: "#586F63"
}
}

要创建重叠效果，我们需要将顶部边距更改为负单位，以便它超出其顶部边距。以下是此样式的代码。我给它一个单独的类“cardOverlap”，以区别于前一个。我还将它添加到同一个“card.js”文件中。

// - card for the overlap style
export const cardOverlap = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: -35,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

最终结果

第 2 课：带放大镜的搜索栏

客户的另一个常见要求是在搜索栏中添加放大镜图标。这可以帮助用户立即识别搜索框。

步骤 1：设置数据并创建纳米流

请注意，在实现元素的样式之前，您需要在域建模器中设置一个实体，如下所示。

In Mendix，搜索栏基本上是一个具有搜索功能的文本框。默认情况下，无法向文本框添加图标。因此，我们需要创建一个布局网格，并将图标放在一列，将文本框放在另一列。

在建模器上，拖入 资料检视 并通过调用 nanoflow 检索数据源。创建一个新的 nanoflow“DS_SearchHelper”。

在数据视图中，创建一个容器并赋予它一个类“searchBar”。这将模拟搜索栏的边框。

在容器内，创建一个两列布局网格（比例为 2:10）。在左侧添加放大镜图像。（您需要先将其上传到图像集合）。

在右侧，添加一个文本框，其属性为“SearchText”，类为“SearchInput”。这是实际的文本框。我们将设计其样式，使其融入此搜索栏。

您还可以为搜索框添加可选的占位符文本。

第 2 步：实现样式

创建一个“search.js”文件。确保它被导入到“main.js”文件中。在其中，我们将添加“searchBar”类和“searchInput”类的代码。

//the container that acts as a search bar (with the icon)
export const searchBar = {
container: {
borderRadius: 8,
backgroundColor: "#ffffff",
borderWidth: 2,
borderColor: "#555555",
height: 50,
paddingLeft: 10,
paddingRight: 10
}
}

//the actual search input field
export const searchInput = {
input: {
backgroundColor: 'transparent',
borderColor: 'transparent',
//placeholder text color
placeholderTextColor: "#A4A4A6",
fontSize: 16,
borderRadius: 50
}
}

最终结果：

第 3 课：叠加元素

最后，我们将了解如何创建一个元素部分重叠于另一个元素的叠加效果。在此示例中，我们将创建一个部分重叠于图像的按钮。

步骤 1：设置布局

从工具箱中，将图像和按钮拖到页面上。相应地更改按钮上的图标。

为图像添加一个类“proPic”，并为按钮添加一个“overlapBtn”。我们稍后会为它们添加样式。

我创建了一个布局，在图像和按钮下方有一些文本元素。但这是可选的。如果您想这样做，请按照以下说明操作：

1. 创建一个环绕图像和按钮的容器。为容器添加“外部介质”间距。将容器居中对齐。

2. 在容器下方，创建一个布局网格并在其中添加一些文本元素。将所有内容包装在容器中，并为其赋予类“popCard”（我们在第 1 课中使用过）。

第 2 步：实现样式

创建新文件“overlay.js”。确保已将其导入“main.js”。创建重叠元素的关键是操纵元素的左边缘和/或右边缘，以便将其故意定位在屏幕上的另一个元素上。

为了实现这一点，我们需要为相关边距添加一个负单位。背后的原理类似于创建元素渗入顶部栏的效果（在第 1 课的附加部分中）。

//profile pic
export const proPic = {
image: {
borderRadius: 100,
width: 150,
height: 150,
},
container: {
borderWidth: 2,
borderColor: "#777777",
borderRadius: 100,
width: 150,
height: 150,
marginTop: 25
}
}

//button to edit the profile pic
export const overlapBtn = {
container: {
borderWidth: 2,
borderRadius: 50,
width: 32,
height: 32,
backgroundColor: "#E7E7E7",
marginRight: -75,
marginTop: -32,
borderRadius: 50,
borderColor: "#777777"
},
icon: {
color: "#000000",
size: 18
}
}

最终结果：

今天就到这里！感谢您阅读本教程。如果您有任何问题，请随时告诉我（[email protected]).