将AWS AppSync与React-Native-Navigation集成

如果您使用的是来自Wix的React-Native-Navigation库，请使用分步方法将AWS AppSync与React-Native App连接。

---

本教程可以用作设置React-native iOS应用程序的指南，该应用程序使用React-Native-Navigation库进行导航，并使用AWS AppSync处理基于云的数据。

首先，设置存储库。 在本教程中，我将使用gitHub，您将在本文结尾处找到该仓库的链接。

  react-native初始化yourAppName 

请访问官方文档以遵循此安装步骤。 容易跟随截图！ https://wix.github.io/react-native-navigation/#/installation-ios

返回官方文档并按照使用步骤进行操作：https://wix.github.io/react-native-navigation/#/usage。

您需要根据wix的上述说明创建一些屏幕； 我坚持使用名字FirstTabScreen，SecondTabScreen和PushedScreen与文档中的示例代码保持一致。 现在，每个屏幕都可以具有基本结构（请参见下文），同时我们确保react-native-navigation正常运行。

在应用程序根目录下的index.js文件中，您会注意到Navigation.startTabBasedApp函数的tabs:数组中每个对象的icon:和selectedIcon:属性； 您可以在此处提供应用程序导航选项卡中显示的所有图标图像的路径。 就本教程而言，我将注释掉这些属性，以免在启动应用程序时出现任何错误。

 从'react'导入React，{Component} 
 从'react-native'导入{Text，View} 
  Class FirstTabScreen扩展了Component { 
  render（）{ 
 返回（ 
   
  这是您的第一个选项卡屏幕 
   
  ） 
  } 
  } 
 导出默认的FirstTabScreen 

按照wix的上述说明并为每个屏幕创建三个简单的组件之后，我们可以转到终端并首次启动我们的应用程序：

 反应本机运行iOS 

成功！ 现在，我们可以进行本机导航！

首次启动控制台时，您会看到一个橙色的“创建API”按钮，

如果这是您第一次使用GraphQL（对我而言），那么“入门”窗口中提供的“架构参考”将为您提供丰富的信息，并且易于遵循。 为了全面了解GraphQL，没有像官方文档这样的地方：http://graphql.org/learn/。

有关AppSync团队创建的其他GraphQL和AppSync资源，请参阅本文结尾。

就本教程而言，我们将使用在模式编辑器中注释掉的示例模式，并对查询类型进行一些修改。 使用左侧的导航菜单，然后单击“架构”以进入编辑器。 执行以下操作以完成您的架构的设置：

成功保存架构后，将在右侧“数据类型”窗口上方启用白色的“创建资源”按钮。 单击它以自动为Schema中的数据类型置备AWS DynamoDB表。 在这种情况下，我们只有一种名为“ Post”的数据类型：

AppSync完成设置资源后，现在将在“查询”和“突变”的解析器字段中填充表名称。 您会注意到，尚未自动为“ putPost”突变和“ allPost”查询分配解析器。 我将逐步介绍如何手动设置解析器，首先我们从“ putPost”开始：

接下来，我们将为allPost设置解析器：

简单！ 就我们设置应用程序的后端而言，这是我们要完成的全部工作，我们将需要使用react-native-navigation显示功能。

使用左侧的导航菜单，然后单击“ YourAppName”。 在该页面的底部，单击React Native，然后单击红色的“下载”按钮。

下载的AppSync.js文件需要放置在应用程序的./src目录中。 此文件包含您的应用与新创建的AppSync API通信所需的信息和权限。 确保下载的是React Native文件，而不是iOS或Web文件。

 纱线添加反应-阿波罗graphql-标签aws-sdk aws-appsync aws-appsync-反应 

在应用程序的./src目录中创建一个名为graphql.js的文件。 该文件将声明您在AppSync控制台中定义的所有graphQL查询和变异，同时还将它们绑定到任何React组件上的功能道具。 将以下内容复制并粘贴到您的graphql.js文件中：

---

特别感谢 AWS Mobile团队的 Nader Dabit 和Richard Threlkeld帮助我清除了在实施过程中的错误。

udugam / aws-app-react-native-navigation

aws-appsync-with-react-native-navigation –使用来自Amazon appSync服务的react-native-navigation的示例应用程序

github.com

其他资源：

AppSync团队还提供了有关设计graphQL API的大量资源，请在此处查看：https://docs.aws.amazon.com/appsync/latest/devguide/designing-a-graphql-api.html。

如果您想启动并运行具有完整架构设置的示例应用程序，AppSync团队还可以在此处创建快速入门指南：https://docs.aws.amazon.com/appsync/latest/devguide/ quickstart.html及其随附的React Native应用程序，该应用程序的仓库位于此处：https://github.com/aws-samples/aws-mobile-appsync-events-starter-react-native

这是详细的React Native Training视频教程，带您逐步了解AppSync控制台并使用资源设置架构：https://www.youtube.com/watch?v=3DhaBaUeiXQ，