[ReactNativeDevelopment]CampingSpotsFinder应用程序用户界面克隆第一部分地图视图用户界面...

本教程的灵感来自房地产模板&＃xff0c;该模板使我们能够构建功能齐全的&＃xff0c;随时可以部署的移动应用程序&＃xff0c;任何人都可以用来构建自己的React Native应用程序。 本教程从React UI Kit的Camping Spots Finder应用程序克隆的Youtube视频教程中复制了编码实现和设计。 该视频教程具有快速编码和快速实现的功能&＃xff0c;这对于初学者来说可能很难理解。 因此&＃xff0c;本教程系列将视频分为不同的部分。 它还提供了分步指南&＃xff0c;任何人都可以轻松掌握和实现自己的应用程序。

在本教程系列的第一部分中&＃xff0c;我们将实现地图以及设置标题和标题选项卡&＃xff0c;这些将为整个应用程序UI创建基础。 这个想法是&＃xff0c;首先要实现地图视图&＃xff0c;然后是将所有部分分成不同功能的标题部分。

所以&＃xff0c;让我们开始吧&＃xff01;

在本教程中&＃xff0c;我们将使用EXPO作为React Native项目开发依赖项。 因此&＃xff0c;首先&＃xff0c;我们将使用expo客户端创建样板React Native应用程序。

创建样板React Native项目

首先&＃xff0c;由于我们将使用expo作为开发引擎&＃xff0c;因此需要将其安装到系统中。 要将expo全局安装到我们的系统中&＃xff0c;我们需要首先安装Node Package Manager&＃xff08;NPM&＃xff09;。 然后&＃xff0c;我们需要运行以下命令&＃xff1a;

现在&＃xff0c;我们需要使用expo创建样板React本机应用程序。 为此&＃xff0c;我们需要在所需的项目目录中运行以下命令&＃xff1a;

运行上述命令后&＃xff0c;将要求我们选择样板应用程序的模板。 在这里&＃xff0c;我们将选择t ** abs **模板&＃xff0c;该模板具有几个示例屏幕和已配置的react-navigation。 下面提供了选择屏幕截图&＃xff1a;

如我们所见&＃xff0c;我们选择选项卡模板&＃xff0c;然后按Enter。 然后&＃xff0c;我们需要输入项目名称&＃xff0c;然后&＃xff0c;将样板React本机应用程序配置到我们的目录中。

现在&＃xff0c;我们需要输入项目目录&＃xff0c;然后运行命令&＃xff1a;

然后&＃xff0c;我们将在模拟器屏幕中获得以下样板应用程序&＃xff1a;

配置导航文件

我们已经在我们的项目中设置了用于导航目的的导航器。 但是现在&＃xff0c;我们需要根据应用程序的要求配置导航器和导航文件。

因此&＃xff0c;首先&＃xff0c;我们需要在项目的“ / navigations”目录中创建一个ScreensNavigator.js文件。 然后&＃xff0c;我们需要在项目的“ / screens”目录中创建一个Campings.js文件和Settings.js文件。 现在&＃xff0c;我们的项目结构如下图所示&＃xff1a;

现在&＃xff0c;我们需要从HomeScreen.js并将其粘贴到Campings.js文件中。 同样&＃xff0c;我们需要从SettingsScreen.js到Settings.js Screen进行相同的操作&＃xff0c;以便该项目现在可以在模拟器中正确运行。

现在&＃xff0c;在ScreensNavigator.js文件中&＃xff0c;我们需要配置导航器&＃xff0c;包括“露营”和“设置”屏幕。 为此&＃xff0c;我们需要使用react-navigation包中的createStackNavigator方法创建一个堆栈导航器&＃xff0c;如下面的代码片段所示&＃xff1a;

在这里&＃xff0c;我们已经将AppNavigator.js文件配置为我们的项目文件。 但是&＃xff0c;我们需要使用新的ScreensNavigator重新配置AppNavigator.js文件。 为此&＃xff0c;我们需要配置主AppNavigator.js文件&＃xff0c;如下面的代码片段所示&＃xff1a;

现在&＃xff0c;如果我们在模拟器中重新运行项目&＃xff0c;则将获得与以前相同的屏幕。

在Camping.js中创建地图视图

在这一步中&＃xff0c;我们将为Camping.js文件中的React Native Camping Spots Finder克隆创建一个Map视图。 为此&＃xff0c;我们将使用为我们提供MapView组件的react-native-maps包。

首先&＃xff0c;我们需要从Camping.js中删除所有代码。 然后&＃xff0c;我们将从React和react-native包中导入所有必需的组件&＃xff0c;如下面的代码片段所示&＃xff1a;

现在&＃xff0c;我们需要使用以下命令将react-native-maps软件包安装到我们的项目中&＃xff1a;

接下来&＃xff0c;我们需要将react-native-maps包导入到Camping.js文件中&＃xff0c;如下所示&＃xff1a;

现在&＃xff0c;为了将地图包含到“露营”屏幕中&＃xff0c;我们需要使用react-native-package提供的MapView组件&＃xff0c;如下面的代码片段所示&＃xff1a;

在这里&＃xff0c;我们将MapView组件绑定到某些样式以及initialRegion道具。 initialRegion属性使我们可以设置地图位置配置&＃xff0c;如上面的代码片段所示。 为了将地图正确放置&＃xff0c;有几个View组件和一个ScrollView组件&＃xff0c;它们用一些样式包装了MapView。 以下代码段提供了所需的样式&＃xff1a;

因此&＃xff0c;我们在模拟器屏幕上得到以下结果&＃xff1a;

配置地图样式

为了在屏幕上正确显示地图&＃xff0c;我们将使用react-native软件包提供的Dimensions组件。 通过使用Dimensions组件&＃xff0c;我们可以获得整个应用程序屏幕的高度和宽度。 然后&＃xff0c;我们可以使用MapView对其进行配置&＃xff0c;以在屏幕上正确显示Map。 现在&＃xff0c;让我们按如下所示导入尺寸&＃xff1a;

现在&＃xff0c;我们需要使用Dimensions组件中的get方法将高度和宽度常量设置为屏幕尺寸&＃xff1a;

接下来&＃xff0c;我们需要在MapView组件中添加高度和宽度尺寸&＃xff0c;以便在屏幕上正确配置它。 下面的代码段提供了执行此操作的代码&＃xff1a;

因此&＃xff0c;我们在模拟器屏幕上得到以下结果&＃xff1a;

如我们所见&＃xff0c;我们已经在Camping应用程序屏幕中成功实现了地图视图。 现在&＃xff0c;我们将向Camping应用程序屏幕添加自定义标题。

实施标头部分

在本节中&＃xff0c;我们将在MapView组件的顶部实现Header。 标头将包含“露营地”位置名称&＃xff0c;右侧带有“设置”按钮。

但是首先&＃xff0c;我们需要删除顶部的默认标题栏。 为此&＃xff0c;我们需要在Campings.js文件中添加以下代码&＃xff1a;

在导航器堆栈提供的navigationOptions中将标头值设置为null时&＃xff0c;顶部的默认标头消失。 结果显示在下面的模拟器屏幕截图中&＃xff1a;

如我们所见&＃xff0c;默认标题消失了。 现在&＃xff0c;我们将实现我们的自定义标题栏。

创建自定义标题

在这里&＃xff0c;我们将实现Campings Spot Finder应用程序克隆的标头部分。 标题部分包含一些图标。 因此&＃xff0c;对于图标&＃xff0c;我们使用以下代码导入expo包本身提供的矢量图标&＃xff1a;

在这里&＃xff0c;我们将从expo包提供的vector-icons包中导入FontAwesome图标包和Ionicons图标包。

现在&＃xff0c;我们将创建一个名为renderHeader&＃xff08;&＃xff09;的函数&＃xff0c;该函数返回模板。 下面的代码段提供了实现此功能的代码&＃xff1a;

在上面的代码段中&＃xff0c;我们添加了一些Text组件和由View组件包装的图标。 然后&＃xff0c;我们需要在我们的render&＃xff08;&＃xff09;函数中调用therenderHeader&＃xff08;&＃xff09;函数&＃xff0c;如下面的代码片段所示&＃xff1a;

因此&＃xff0c;我们将在模拟器屏幕中获得以下结果&＃xff1a;

如我们所见&＃xff0c;标头部分位于MapView的顶部&＃xff0c;但看起来并不吸引人。 因此&＃xff0c;我们需要为其添加一些样式&＃xff0c;以使其看起来像“露营点查找器”应用程序一样酷。

向标题添加样式和配置

在这里&＃xff0c;我们将向标头部分添加一些样式配置&＃xff0c;以使其看起来更具吸引力。 为了做到这一点&＃xff0c;我们将使用许多样式绑定。 这里使用了本机样式的flex属性。 因此&＃xff0c;我们可以深入了解如何使用flex属性。 因此&＃xff0c;下面的代码片段中提供了实现此目的的代码&＃xff1a;

在上面的代码段中&＃xff0c;设置Icon组件由TouchableOpacity组件包装&＃xff0c;以使其可单击。 然后&＃xff0c;使用内联以及来自样式表的不同样式绑定&＃xff0c;以使标头部分具有适当的外观。 下面的代码段提供了此部分的样式&＃xff1a;

结果&＃xff0c;我们在模拟器屏幕中得到以下结果&＃xff1a;

如我们所见&＃xff0c;标题部分现在看起来很酷&＃xff0c;并且很吸引人&＃xff0c;左侧是导航箭头图标&＃xff0c;右侧是设置图标。 它用于显示实际应用中检测到的位置名称。

在这里&＃xff0c;我们在renderHeader&＃xff08;&＃xff09;函数中创建了标头部分&＃xff0c;该函数返回标头部分模板。 这使我们项目的render&＃xff08;&＃xff09;方法中的代码看起来更加清晰。 因此&＃xff0c;让我们实现MapView以及将要以函数样式实现的其他部分。

将UI部分划分为功能

这只是中间步骤&＃xff0c;我们将把不同UI部分的编码实现分成功能&＃xff0c;以使render方法的代码更少。 这将帮助我们更好地理解和阅读代码。 render&＃xff08;&＃xff09;方法将变得干净&＃xff0c;清除所有混合为一个的编码段。 因此&＃xff0c;让我们完成这项工作。

首先&＃xff0c;我们将MapView的代码移至renderMap&＃xff08;&＃xff09;函数&＃xff0c;如下面的代码片段所示&＃xff1a;

现在&＃xff0c;renderMap&＃xff08;&＃xff09;方法将返回MapView组件模板。

然后&＃xff0c;在接下来的教程中&＃xff0c;我们将实现map组件下方的List部分。 但是&＃xff0c;首先让我们为该部分创建一个名为renderList&＃xff08;&＃xff09;函数的单独函数&＃xff0c;该函数返回list部分的模板。 该功能在下面的代码片段中提供&＃xff1a;

在这里&＃xff0c;我刚刚在View组件中添加了Text元素&＃xff0c;我们将在本教程的下一部分中对其进行配置。

现在&＃xff0c;我们需要将这些函数调用到项目的render&＃xff08;&＃xff09;方法上&＃xff0c;如下面的代码片段所示&＃xff1a;

因此&＃xff0c;我们将在模拟器屏幕中获得以下结果&＃xff1a;

如我们所见&＃xff0c;我们在屏幕上正确显示了所有三个部分。

但是&＃xff0c;对于本部分的教程&＃xff0c;我们尚未完成。 我们将在标题部分和MapView部分之间再添加一个标题标签部分。

实施选项卡部分

在此步骤中&＃xff0c;我们将在原标题中添加选项卡按钮&＃xff0c;如在原始Campings Spot Finder应用程序中所见。 为此&＃xff0c;我们将创建另一个函数&＃xff0c;该函数返回tabs部分的模板。 该函数名为renderTabs&＃xff08;&＃xff09;&＃xff0c;其实现在以下代码段中提供&＃xff1a;

在这里&＃xff0c;我们添加了一些由View组件包装的Text元素。 然后&＃xff0c;我们还需要在render&＃xff08;&＃xff09;函数中调用renderTabs&＃xff08;&＃xff09;函数&＃xff1a;

因此&＃xff0c;我们在模拟器屏幕上得到以下结果&＃xff1a;

如我们所见&＃xff0c;标头和​​MapView部分之间有一部分&＃xff0c;但看起来不像标签。 为了使其看起来像一个选项卡&＃xff0c;我们需要向其添加一些样式和配置。

在“标签”部分添加样式和配置

在这里&＃xff0c;我们将样式配置添加到选项卡部分&＃xff0c;以使其看起来像选项卡。 为此&＃xff0c;我们需要使用不同的样式绑定&＃xff0c;包括flex属性。 填充和字体属性。 下面的代码段提供了实现此目的的代码&＃xff1a;

因此&＃xff0c;如下面的模拟器屏幕截图所示&＃xff0c;我们获得的标签的外观比以前更具吸引力&＃xff1a;

如我们所见&＃xff0c;我们在标题和地图部分之间找到了标签。 现在&＃xff0c;我们需要添加活动的标签样式以及用于处理标签的活动样式的配置。

配置活动标签

在这里&＃xff0c;我们将添加用于确定活动标签的编码实现。 首先&＃xff0c;我们需要一个名为active的状态来处理活动的标签样式属性&＃xff0c;如下面的代码片段所示&＃xff1a;

现在&＃xff0c;我们需要创建一个函数来处理更改和状态&＃xff0c;并在单击时将活动样式设置为正确的选项卡。 为此&＃xff0c;我们将创建一个名为handleTab&＃xff08;&＃xff09;的函数&＃xff0c;该函数将制表符值作为参数&＃xff0c;并在触发时将活动状态设置为制表符值。 下面的代码段提供了该函数的编码实现&＃xff1a;

现在&＃xff0c;我们需要为活动选项卡定义一些样式。 然后&＃xff0c;需要将此样式配置绑定到renderTabs&＃xff08;&＃xff09;函数内的选项卡部分模板中的Text和View上。 下面的代码段提供了活动选项卡所需的样式&＃xff1a;

上面给出的样式将为活动选项卡的文本提供颜色&＃xff0c;以及将活动选项卡围在底部的边框的View组件。

现在&＃xff0c;我们需要包括这些样式&＃xff0c;并将其包含到renderTabs&＃xff08;&＃xff09;函数中&＃xff0c;该函数的值取决于选项卡的活动状态。 然后&＃xff0c;我们还需要将handleTab&＃xff08;&＃xff09;函数绑定到选项卡的Text组件的onPress事件。 函数调用还应根据选定的活动选项卡将参数设置为函数。 下面的代码段提供了实现所有这些功能的代码&＃xff1a;

因此&＃xff0c;我们将在模拟器屏幕中获得以下结果&＃xff1a;

最后&＃xff0c;我们在Camping Spots Finder应用程序克隆教程系列的这一部分中成功实现了标题部分&＃xff0c;标题选项卡部分和MapView部分。

结论

这是我们的系列教程的第一部分&＃xff0c;用于克隆Camping Spots Finder应用程序UI。 在本教程的一部分中&＃xff0c;我们首先学习了如何使用expo设置样板React本地应用程序项目。 然后&＃xff0c;我们学习了如何配置导航器和屏幕&＃xff0c;以准备应用程序UI。 之后&＃xff0c;我们逐步指导了如何使用react-native-maps包&＃xff0c;带有图标的标题部分和具有活动标签样式的标题标签部分来实现MapView。 我们还获得了有关如何将UI部分分离为不同功能的奖励指南&＃xff0c;这些功能可返回所需模板以使代码清晰。 本教程系列的第一部分有点长&＃xff0c;但是我们必须学习更多的知识&＃xff0c;并为以后的部分设置基本的UI&＃xff0c;这将使本系列更容易掌握和实现。

在下一部分中&＃xff0c;我们将实现在本教程前面的列表部分&＃xff0c;我们将其分成一个函数&＃xff0c;并设置到设置屏幕的导航。

因此&＃xff0c;敬请关注&＃xff01;&＃xff01;

揭露

这篇文章包括会员链接&＃xff1b; 如果您通过本文提供的不同链接购买产品或服务&＃xff0c;我可能会获得赔偿。

带有“ React Native&＃xff03;1&＃xff1a;地图视图” UI的Camping Spots Finder应用程序UI克隆首先出现在Kriss上 。

翻译自: https://hackernoon.com/camping-spots-finder-app-ui-clone-with-react-native-1-map-view-ui-8muy303x