使用React Native和MapBox的逐行导航

我搜索了React Native的转弯导航，我能得到的最好的是：https://github.com/flyandi/react-native-maps-navigation。

我会说这是一个好的开始。 但是作者说：

请注意，此模块可用，但仍在大量开发中。 某些属性和/或组件名称可能会更改，恕不另行通知。

我不是一直都在更改代码，所以我决定采用更稳定/经过测试的解决方案。 即：MapBox

本教程的实施非常简单，只要您按照以下步骤操作，就应该能够进行逐步导航。

PS：我得到的反馈是，如果您已经在使用Mapbox React Native库，则以下步骤将不起作用。 如果您有解决方法，请告诉我，以便我可以链接到您的文章/库…

---

为了简短起见，我将跳过这一部分，我假设任何尝试实现这种高级功能的人都可以使用Google“ Setup React Native”。

设置好环境后，我们需要创建我们的项目（我的第一个项目）并导入必要的Pod：

 反应性初始TbtNavigation 
  cd TbtNavigation 
  npm install-保存 
  cd ios / 
 荚初始化 

执行Pod初始化将为您创建一个Podfile，您可以使用自己喜欢的文本编辑器编辑此文件以添加必要的Pod。 如果您不喜欢cocoapods，则必须先进行设置。 您可以在这里找到操作方法。

打开您的Podfile并添加以下行：

  pod'MapboxNavigation'，'〜> 0.22.0' 

您的文件现在应如下所示：

  ＃取消注释下一行以定义项目的全局平台 
  ＃platform：ios，'9.0' 
 目标'TbtNavigation'做 
  ＃如果您不使用Swift并且不想使用动态框架，请注释下一行 
  use_frameworks！＃TbtNavigation的窗格 
  pod'MapboxNavigation'，'〜> 0.22.0'target'TbtNavigationTests'做 
 继承！  ：search_paths 
  ＃测试豆荚 
  endendtarget'TbtNavigation-tvOS'做 
  ＃如果您使用的是Swift或想使用动态框架，请取消注释下一行 
  ＃use_frameworks！＃TbtNavigation-tvOStarget'TbtNavigation-tvOSTests'的容器 
 继承！  ：search_paths 
  ＃测试豆荚 
 结束＃ 

确保use_frameworks！ 行未注释掉，然后运行：

 吊舱安装 

这将设置您并确保您拥有此示例所需的一切。 另外，由于我们使用Pod，因此从现在开始，需要使用.xcworkspace文件打开项目。

注意：如果在执行Pod安装之前在Xcode上打开了项目，则需要重新启动Xcode，以考虑到新的可用Pod。

为了使React Native与我们的本机模块通信，我们需要设置一个桥。 如果您对使用Objective-c感到满意，这主要是用Swift编写的代码，您可以直接从类中导出函数。

就本教程而言，我将创建一个类，该类将触发逐步导航并将其公开给React Native。

一种。 创建Swift类

首先让我们创建我们的类，我将其命名为TbtNavigation（它不必与您的项目同名），因为它可以打开.xcworkspace

在组TbtNavigation下创建一个新的swift文件：

注意：确保目标设定正确！

然后，Xcode会很好地询问您是否要生成Objective-c桥接标头。 单击创建。 这将为您创建一个带有项目名称的文件，并将其设置为项目的桥梁上的桥梁。

b。 将React导入我们的本地项目

为此，请打开您的Bridging-Header.h并添加以下行：

  #import“ React / RCTBridgeModule.h” 

为了简化本示例，我将对起点和终点进行硬编码。 当然，在普通的应用程序中，您将从用户（应用程序的“响应本机”部分）获取这些坐标，并将它们作为参数传递给我们的函数。

在您的Swift类中，添加以下代码：

 进口基金会 
 导入MapboxDirections 
 导入MapboxCoreNavigation 
 导入MapboxNavigation @ objc（TbtNavigation）类TbtNavigation：NSObject {@objcfunc takeMeToWH（）{让原点= Waypoint（坐标：CLLocationCoordinate2D（纬度：38.9131752，经度：-77.0324047），名称：“ Mapbox”）let destination = Waypoint（坐标： CLLocationCoordinate2D（纬度：38.8977，经度：-77.0365），名称：“白宫”）let options = NavigationRouteOptions（航路点：[原点，目的地]）Directions.shared.calculate（options）{（航路点，路线，错误）后卫让route = route？.first else {return} let viewController = NavigationViewController（用于：route）let appDelegate = UIApplication.shared.delegateappDelegate！.window !!。rootViewController！.present（viewController，动画：true，完成：nil）}} } 

这里要注意的最重要的事情是对我们从共享UIApplication中获取的App委托的引用。 然后，我们将其安装在导航视图控制器上。

我意识到这可能有点复杂，但是这里是Mapbox的官方文档，本教程重点介绍集成部分…

一种。 创建一个Objective-c处理程序

为了将我们的方法暴露给外部世界，即React Native，我们需要通过一个Objective-C文件来实现。 为此，我们重现了与Swift类相同的步骤。

b。公开您的可用方法

为了向React Native公开这些方法，RN提供了一些我们可以调用的便捷函数。 以下代码将使用RCT_EXTERN_REMAP_MODULE公开我们的模块，并将使用RCT_EXTERN_METHOD公开的方法公开给React Native。

将此代码添加到新创建的Objective-C文件中。

  #import "React/RCTBridgeModule.h"@interface RCT_EXTERN_REMAP_MODULE（RNTbtNavigation，TbtNavigation，NSObject）RCT_EXTERN_METHOD（takeMeToWH）@end 

最后但并非最不重要的一点是，我们需要从JS内部调用方法。 转到主项目文件夹，然后打开App.js文件。

现在，我们要做的就是告诉RN我们需要使用NativeModule，然后从本机模块中调用模块，然后调用方法。

就是这样！

现在尝试从Xcode运行您的应用程序，您应该会得到一个不错的且不言自明的错误。 此错误还表明我们的项目当前正在运行，并且React Native成功调用了我们的Native方法。

需要Mapbox访问令牌。 转到。 在Info.plist中，将MGLMapboxAccessToken密钥设置为您的访问令牌，或使用Directions（accessToken：host :)初始化程序。

因此，我们只需按照以下步骤操作，即可在Mapbox上创建一个帐户（它是免费的，而且限额足够高，您可以尝试一下）

此部分特定于Mapbox。 获取访问令牌后，转到项目编辑器，选择应用程序目标，然后转到“信息”选项卡。 在“自定义iOS目标属性”部分下，将MGLMapboxAccessToken设置为您的访问令牌。

为了使Mapbox正常工作，我们需要为其提供一些后台功能。 转到“功能”选项卡，然后在“背景模式”部分下启用“音频，AirPlay和画中画”和“位置更新”。

再次重新运行您的项目，您应该让您的应用向您询问您所在位置的权限，当该应用被授予后，您便会到达目的地。

瞧！

我想这是一个非常快速的教程，没有涉及太多细节，但是如果您有任何疑问，请发表评论，我将尽快回复它。

---

完整的工作示例可在此处获取：https：//github.com/113408/TbtNavigation