Tag: React Native Navigation

将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设置解析器： 简单！ […]