热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

本教程的灵感来自房地产模板,该模板使我们能够构建功能齐全的,随时可以部署的移动应用程序,任何人都可以用来构建自己的ReactNative应

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

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

所以,让我们开始吧!

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

创建样板React Native项目

首先,由于我们将使用expo作为开发引擎,因此需要将其安装到系统中。 要将expo全局安装到我们的系统中,我们需要首先安装Node Package Manager(NPM)。 然后,我们需要运行以下命令:

npm install -g expo

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

expo init // project name==> Camping Spots Finder

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

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

现在,我们需要输入项目目录,然后运行命令:

expo start

然后,我们将在模拟器屏幕中获得以下样板应用程序:

配置导航文件

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

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

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

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

import React from 'react' ;
import { createStackNavigator } from 'react-navigation' ;import Campings from '../screens/Campings' ;
import Settings from '../screens/Settings' ;export default createStackNavigator({Campings : Campings,Settings : Settings,
});

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

import React from 'react' ;
import { createAppContainer, createSwitchNavigator } from 'react-navigation' ;import ScreensNavigator from './ScreensNavigator' ;export default createAppContainer(createSwitchNavigator({Main : ScreensNavigator,
}));

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

在Camping.js中创建地图视图

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

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

import React from 'react' ;
import {Image,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View,
} from 'react-native' ;

现在,我们需要使用以下命令将react-native-maps软件包安装到我们的项目中:

expo install react-native-maps

接下来,我们需要将react-native-maps包导入到Camping.js文件中,如下所示:

import MapView from 'react-native-maps' ;

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

class Campings extends React . Component {render(){return (style = {styles.container} > );}
}

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

const styles = StyleSheet.create({container : {flex : 1 ,backgroundColor : '#fff' ,},map :{flex : 1},contentContainer : {paddingTop : 30 ,},
});

因此,我们在模拟器屏幕上得到以下结果:

配置地图样式

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

import {Image,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View,Dimensions
} from 'react-native' ;

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

const { width, height } = Dimensions.get( 'screen' );

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

flex : 1 , height : height * 0.5 , width}} initialRegion={{latitude : 37.78825 ,longitude : -122.4324 ,latitudeDelta : 0.0922 ,longitudeDelta : 0.0421 ,}}
/>

因此,我们在模拟器屏幕上得到以下结果:

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

实施标头部分

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

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

class Campings extends React . Component {static navigationOptions = {header : null ,};

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

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

创建自定义标题

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

import { FontAwesome , Ionicons} from '@expo/vector-icons' ;

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

现在,我们将创建一个名为renderHeader()的函数,该函数返回模板。 下面的代码段提供了实现此功能的代码:

renderHeader() {return (style = {styles.header} > Detected LocationNorthern Islands () )
}

在上面的代码段中,我们添加了一些Text组件和由View组件包装的图标。 然后,我们需要在我们的render()函数中调用therenderHeader()函数,如下面的代码片段所示:

render(){return (style = {styles.container} > {this.renderHeader()} //here

因此,我们将在模拟器屏幕中获得以下结果:

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

向标题添加样式和配置

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

renderHeader() {return (style = {styles.header} > Detected LocationNorthern Islands)}

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

header: {flex : 1 ,flexDirection : 'row' ,alignItems : 'center' ,justifyContent : 'center' ,height : height * 0.15 ,paddingHorizontal : 14 ,},location : {height : 24 ,width : 24 ,borderRadius : 14 ,alignItems : 'center' ,justifyContent : 'center' ,backgroundColor : '#FF7657' ,},settings : {alignItems : 'center' ,justifyContent : 'center' ,},options : {flex : 1 ,paddingHorizontal : 14 ,},

结果,我们在模拟器屏幕中得到以下结果:

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

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

将UI部分划分为功能

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

首先,我们将MapView的代码移至renderMap()函数,如下面的代码片段所示:

renderMap(){return (style = {styles.map} > )
}

现在,renderMap()方法将返回MapView组件模板。

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

renderList(){return ( List of camping site here )}

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

现在,我们需要将这些函数调用到项目的render()方法上,如下面的代码片段所示:

render(){return (style = {styles.container} > {this.renderHeader()} //for header section{this.renderMap()} //for MapView section{this.renderList()} //for List section );
}

因此,我们将在模拟器屏幕中获得以下结果:

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

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

实施选项卡部分

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

renderTabs(){return ( All SpotsTentingRV Camping )
}

在这里,我们添加了一些由View组件包装的Text元素。 然后,我们还需要在render()函数中调用renderTabs()函数:

render(){return (style = {styles.container} > {this.renderHeader()} //for header section {this.renderTabs()} //for tabs section{this.renderMap()} //for MapView section{this.renderList()} //for List section );}

因此,我们在模拟器屏幕上得到以下结果:

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

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

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

renderTabs(){return (style = {styles.tabs} > All SpotsTentingRV Camping )
}

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

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

配置活动标签

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

state = {active : 'all'
}

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

handleTab =( tabKey ) => {this .setState({ active : tabKey });}

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

activeTab: {borderBottomColor : '#FF7657' ,},activeTabTitle : {color : '#FF7657' ,},

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

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

renderTabs(){const {active} = this .statereturn (style = {styles.tabs} > this.handleTab('all')}>All Spots this.handleTab('tent')}>Tenting this.handleTab('rv')}>RV Camping )}

因此,我们将在模拟器屏幕中获得以下结果:

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

结论

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

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

因此,敬请关注!!

揭露

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

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

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




推荐阅读
  • 本文介绍如何使用Objective-C结合dispatch库进行并发编程,以提高素数计数任务的效率。通过对比纯C代码与引入并发机制后的代码,展示dispatch库的强大功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 主要用了2个类来实现的,话不多说,直接看运行结果,然后在奉上源代码1.Index.javaimportjava.awt.Color;im ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本文介绍了如何通过 Maven 依赖引入 SQLiteJDBC 和 HikariCP 包,从而在 Java 应用中高效地连接和操作 SQLite 数据库。文章提供了详细的代码示例,并解释了每个步骤的实现细节。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文将介绍如何使用 Go 语言编写和运行一个简单的“Hello, World!”程序。内容涵盖开发环境配置、代码结构解析及执行步骤。 ... [详细]
  • This guide provides a comprehensive step-by-step approach to successfully installing the MongoDB PHP driver on XAMPP for macOS, ensuring a smooth and efficient setup process. ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文介绍了如何在C#中启动一个应用程序,并通过枚举窗口来获取其主窗口句柄。当使用Process类启动程序时,我们通常只能获得进程的句柄,而主窗口句柄可能为0。因此,我们需要使用API函数和回调机制来准确获取主窗口句柄。 ... [详细]
  • 本文详细介绍如何使用Samba软件配置CIFS文件共享服务,涵盖安装、配置、权限管理及多用户挂载等关键步骤。通过具体示例和命令行操作,帮助读者快速搭建并优化Samba服务器。 ... [详细]
author-avatar
郭先2502898821_918
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有