随着移动设备的普及，移动应用程序的重要性也越来越突出。而 React Native 和 GraphQL 成为了移动开发领域的热门工具。本文将介绍如何使用 React Native 和 GraphQL 构建一个电影资讯应用程序，并介绍相关知识点。
准备工作
在开始开发之前，我们需要先准备开发环境。首先需要下载安装 Node.js 和 npm。在安装完成后，我们可以使用 npm 安装 React Native 命令行工具。
npm install -g react-native-cli
安装完成后，我们可以使用 react-native 命令来创建一个新的 React Native 项目。
react-native init MovieApp
这时，我们就可以在当前目录下看到一个名为 MovieApp 的项目文件夹。
创建 GraphQL API
在开发一个电影资讯应用程序时，我们需要获取电影的相关信息。为此，我们可以使用 GraphQL 作为我们的 API。在本文中，我们使用 The Movie Database API 来获取电影相关信息。
首先，我们要在 The Movie Database 网站上注册一个开发者账户，在 Dashboard 页中获取 API KEY。然后，我们可以使用以下命令安装依赖包。
npm install apollo-graphql graphql-request
接着，我们可以在项目文件夹下创建一个名为 graphql.js 的文件，并编写以下代码来获取电影列表。
-- -------------------- ---- -------
------ - -------- --- - ---- ------------------
----- -------- - ---------------------------------------
----- ------ - ---------------
----- ----- - ----
-
------------- -
--
-----
--------
-----------
-
-
--
------ ----- ----------- - -- -- -
------ ----------------- ------ - -------- ------ -------------- -- -
------ -------------------
---
--这里我们使用了 graphql-request 封装的 request 方法来向 The Movie Database API 获取数据，并使用 gql 方法定义一个 GraphQL 查询语句来获取电影列表的 id、title、overview 和 poster_path 字段。其中，我们需要替换 apiKey 常量为自己的 API KEY。
创建 React Native 应用程序
接着，我们可以在项目文件夹下运行以下命令来启动 React Native 应用程序。
react-native start
然后，在另外一个终端中运行以下命令来启动 Android 模拟器。
react-native run-android
注意：在使用 android 模拟器时，需要先用 Android SDK Manager 安装 Android SDK，并在电脑中设置 ANDROID_HOME 环境变量。
在应用程序中，我们将使用 Apollo Client 来获取数据，并使用 React Navigation 来进行页面导航。运行以下命令来安装依赖。
npm install @apollo/client react-navigation
接着，在 App.js 文件中编写以下代码来获取电影列表并展示它们。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ----------- ----- - ---- ---------------
------ - ------------------- - ---- ---------------------------
------ - -------------------- - ---- --------------------------
------ - --------------- --------- --- - ---- -----------------
----- -------- - ---------------------------------------
----- ------ - --- --------------
---- ---------
---
----- ----- - ----
-
------------- -
--
-----
--------
-----------
-
-
--
----- --------- - -- -- -
----- - -------- ------ ---- - - ----------------
-- --------- ------ ------------------------
-- ------- ------ ----------- ----------
------ -
----- -------------------------
------------------------------- -- -
----- -------------- --------------------
------
---------------------
--------- ---- ----------------------------------------------------- --
--
----- -----------------------------------------
----- -----------------------------------------------
-------
---
-------
--
--
----- ----- - -----------------------
------ ------- -------- ----- -
------ -
--------------- ----------------
---------------------
-----------------
------------- ---------------- --------------------- --
------------------
----------------------
-----------------
--
-
----- ------ - -------------------
---------- -
----- --
-------------- ---------
--------------- ---------
----------- ---------
---------------- ----------
--
----- -
------ ------
------------- --
---------------- ----------
-------- ---
------- ---
------------ -------
------------- - ------ -- ------- - --
-------------- ----
------------- --
--
------- -
------ -------
------- ----
--
------ -
--------- ---
----------- -------
----------- ---
-------------- --
--
--------- -
--------- ---
--
---在这里，我们使用了 useQuery 钩子来获取电影数据，并使用 ApolloProvider 来提供 Apollo Client。此外，我们使用 createStackNavigator 来创建一个名为 MovieList 的页面，并使用 Image、Text 和 StyleSheet 来实现电影列表卡片的布局样式。
总结
通过本文的介绍，我们学习了如何使用 React Native 和 GraphQL 构建一个电影资讯应用程序。具体来说，我们下载安装了必要的开发工具，创建了一个 GraphQL API 来获取电影信息，使用 Apollo Client 和 React Navigation 来开发了单页面应用程序，并用实例代码展示了如何获取数据和设置页面布局样式。希望这篇文章可以帮助你了解和掌握相关技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654dab187d4982a6eb71765a