React Native Car Parking Finder应用程序用户界面克隆＃6：实现模式视图
本教程是我们的React Native停车场应用程序UI克隆系列的第六部分。在最后一部分中，我们成功地在地图屏幕中实现了Header部分并组织了代码。在本教程系列的这一部分中，我们将从上一部分中停下来的地方继续。因此，建议仔细阅读本教程系列的所有先前部分，以获取项目的完整见解和开发信息。如先前部分所述，本教程系列的动机来自React Native Store Locator App模板，为我们提供了一个用React Native编写的动态，完整编码的入门工具包，任何人都可以用来构建自己的商店定位器React Native应用程序或启动自己的启动。并且，这第六部分也是YouTube视频教程中的编码实现和设计的延续，该视频和实现是针对停车场查找器应用程序UI克隆的React UI Kit。该视频教程似乎使用快速编码风格交付了不同UI部分的实现，这对于任何开发人员（尤其是初学者）可能都难以理解。但是，本教程将逐步指导每个UI部分的实现。因此，读者可以放松身心，花些时间学习和实现UI。概述在本系列教程的第六部分中，我们将实现一个Modal，该Modal使用不同的UI部分显示停车卡部分的扩展信息。这个想法是安装react-native-modal软件包并将其集成到地图屏幕中。然后，我们将配置Modal，以使其在实际应用中看起来像。最后，我们将在Modal视图中实现不同的部分并设置它们的样式，因此，让我们开始!!安装Modal程序包这里我们将react-native-modal程序包安装到我们的项目中。该软件包提供了增强的，动画的和可自定义的本机反应模式。该软件包的主要目的是通过添加动画和样式自定义选项来扩展原始的本机Modal组件，同时仍提供一个简单的API。现在要将这个包安装到我们的项目中，我们需要运行以下命令：expo install react-native-modal然后，我们需要将此包作为Map.js文件中的Modal组件导入，如下面的代码片段所示：从'react-native-modal'导入模态；实现模态在这一步中，我们将把模态实现到Map屏幕中。为此，我们需要定义一个名为activeModal的状态以处理模态的打开和关闭。 activeModal应该按照下面的代码片段所示进行定义：state = {
小时： {}，
active：null，
activeModal：空
}现在，当我们按下停车位卡上的购买按钮时，我们需要激活模式。为此，我们需要在TouchableOpacity组件的onPress事件中更改activeModal的状态，如下面的代码片段所示：
const {activeModal} = this.state;
如果（activeModal）返回null;
返回（
onBackdropPress = {（）=> this.setState（{activeModal：null}）}
>
）
}在此，我们在renderModal（）方法内部，根据状态变量定义了activeModal常量。然后，如果activeModal状态为空，则renderModal（）函数将返回null，这不会在应用程序屏幕上显示Modal。但是，如果activeModal状态不为空，则该函数将返回带有Modal组件的模板。这里的Modal组件配置有不同的道具。isVisible道具用于在屏幕上显示模态。在Modal组件的onBackButtonPress和onBackdropPress事件中，我们已将activeModal状态更改为null以从屏幕上隐藏Modal。我们还集成了一些带有某些内联样式的View组件环绕Text组件。现在，我们需要在Map.js文件的render（）函数中调用renderModal（）方法，如下面的代码片段所示：render（）{
返回（
…………
{this.renderParkings（）}
{this.renderModal（）}
）
}现在，renderModal（）函数中使用的必需样式在以下代码段中提供：modal：{
backgroundColor：theme.COLORS.white
}因此，我们将在仿真器屏幕中获得以下结果：
如我们所见，屏幕上会出现一个模态。但是模态太小了，所以我们需要配置更多的道具和样式以使模态更具吸引力。配置模态属性和样式这里，我们将为模态组件配置一些其他的道具和样式。为此，我们需要使用以下代码段中的代码：renderModal（）{
const {activeModal} = this.state;
如果（activeModal）返回null;
返回（
onBackdropPress = {（）=> this.setState（{activeModal：null}）}
onSwipeComplete = {（）=> this.setState（{activeModal：null}）}
>
）
}此处，我们包含了一个名为“ useNativeDriver”的道具，该道具使用本机驱动程序配置和属性来处理Modal的工作。我们还包含了一个inSwipeComplete事件，该事件将activeModal状态更改为null。然后，我们还为Modal组件提供了一个样式属性，该属性在下面的代码片段中提供：modalContainer：{
边距：0，
justifyContent：'flex-end'，
}，
方式：{
高度：高度* 0.75，
backgroundColor：theme.COLORS.white，
}，因此，我们将在仿真器屏幕中获得以下结果：
如我们所见，Modal组件现在覆盖了屏幕下部的一半以上。添加Modal contentNow，现在我们将在Modal视图内添加一些内容。当我们在每个停车位按下购买按钮时，我们添加了触发器以打开Modal。触发时，我们已将“activeModal''状态设置为来自parkingsSpots数据数组的特定停车位数据。现在，我们将使用存储在activeModal状态中的值将不同的停车位信息添加到Modal中。为此，我们需要使用renderModal函数中以下代码片段中的代码：renderModal（）{
const {activeModal，hours} = this.state;
如果（activeModal）返回null;
返回（
onBackdropPress = {（）=> this.setState（{activeModal：null}）}
onSwipeComplete = {（）=> this.setState（{activeModal：null}）}
>
）
}这里，我们添加了不同的“视图和文本”组件，以在parkingsSpots数据数组中显示信息。我们还使用了TouchableOpacity组件，该组件将View和Text组件盘点为Modal中的最终购买按钮。组件绑定到以下代码段中提供的不同样式：modal：{
flexDirection：'列'，
高度：高度* 0.75，
填充：theme.SIZES.base * 2
backgroundColor：theme.COLORS.white，
borderTopLeftRadius：theme.SIZES.base，
borderTopRightRadius：theme.SIZES.base，
}，因此，我们将在模拟器屏幕中获得以下结果：
我们可以看到，某些内容已经出现在屏幕上，但是位置不正确。现在，我们需要对它们进行适当的样式设置，以使Modal内容看起来像在实际应用中一样吸引人。在这里，我们还可以注意到我们在Modal内容中添加了额外的距离和描述数据。但是这些数据未包含在parkingsSpots数据数组中。因此，我们需要首先添加该数据。在这里，我们将把距离和描述数据添加到parkingsSpots数据数组中的每个项目中，如下面的代码片段所示：const parkingsSpots =（
{
编号：1
标题：“停车场1”，
价格：5
评分：4.2，
点数：20
免费：10
坐标：{
纬度：37.78735，
经度：-122.4334，
}，
距离：2.5，
描述：`关于这个停车场的描述
开放年2018
使用CTV进行保护，
}，
{
编号：2
标题：“停车场2”，
价格：7
评分：3.8，
点数：25
免费：20
坐标：{
纬度：37.78845，
经度：-122.4344，
}，
距离：3.5，
描述：`关于这个停车场的描述
开放年2018
使用CTV进行保护，
}，
{
id：3，
标题：“停车场3”，
价格：10，
评分：4.9，
点数：50
免费：25，
坐标：{
纬度：37.78615，
经度：-122.4314，
}，
距离：1，
描述：`关于这个停车场的描述
开放年2018
使用CTV进行保护，
}，
）;对内容进行样式设置这里，我们将对Modal组件内部的组件进行样式设置，以使Modal内容与实际应用程序中的外观相同。为此，我们需要使用以下代码片段中的代码：
onBackdropPress = {（）=> this.setState（{activeModal：null}）}
onSwipeComplete = {（）=> this.setState（{activeModal：null}）}
>
{activeModal.title}
{activeModal.description}
继续支付${activeModal.price * hours（activeModal.id）}
在这里，我们添加了不同的内联样式属性以及StyleSheet组件中的样式。以下代码段提供了来自StyleSheet组件所需的样式：modalInfo：{
flexDirection：'行'，
justifyContent：“空间均匀”，
paddingVertical：theme.SIZES.base，
borderTopWidth：1
borderBottomWidth：1
borderTopColor：theme.COLORS.overlay，
borderBottomColor：theme.COLORS.overlay，
}，
modalHours：{
paddingVertical：高度* 0.11，
}，
payBtn：{
borderRadius：6
flexDirection：'行'，
alignItems：'中心'，
justifyContent：'space-between'，
填充：theme.SIZES.base * 1.5，
backgroundColor：theme.COLORS.red，
}，
payText：{
fontWeight：“ 600”，
fontSize：theme.SIZES.base * 1.5，
颜色：theme.COLORS.white，
}因此，我们将在仿真器屏幕中获得以下结果：如我们所见，我们将所有组件放置在正确的位置，这使Modal更具吸引力。现在，我们需要在Modal中添加图标。添加图标在这里，我们将图标添加到Modal内容中的相应UI部分。我们已经从expo客户提供的vector-icons包中导入了Ionicons包。现在，我们将包含如下所示的代码片段所示的“Ionicons''组件：
如我们所见，在“模式”视图中有图标。但是我们可以看到“选择您的预订期限”部分中缺少某些内容。在本节中，我们需要像在停车位卡中那样添加小时数部分。将小时数部分添加到ModalHere中，我们只是要将小时数部分添加到模态中。我们将在文本部分下方添加具有“选择您的预订期间”文本的文本部分，如下面的代码片段所示：
paddingVertical：高度* 0.15，
}，
modalHoursDropdown：{
flexDirection：'行'，
justifyContent：“中心”，
alignItems：'中心'，
paddingVertical：theme.SIZES.base，
}，因此，我们将在模拟器屏幕中获得以下结果：
如我们所见，我们的模式中有小时部分。至此，本教程的这一部分结束了。最后，我们在Map屏幕中成功完成了Modal的实现。结论本教程是React Native Car Parking Finder App UI克隆教程系列的第六部分。在这一部分中，我们从本教程系列第五部分的上一节继续。在本教程的这一部分中，我们学习了如何设置react-native-modal软件包以在我们的Map屏幕中实现Modal。我们还学习了如何配置Modal组件，以使其看起来更好并过渡得更好。然后，我们还了解了如何在Modal组件内添加不同的UI部分。最后，我们成功实现了与实际应用程序设计中一样的Modal视图。在本教程系列的下一部分中，我们将在停车位卡部分中实现时间下拉菜单。