React Native 是一款基于 React 的移动应用开发框架，可以帮助开发者快速构建高性能、跨平台的移动应用。GraphQL 是一种数据查询和操作语言，它可以提供更加灵活、高效的数据查询和操作方式。本文将介绍如何利用 React Native 和 GraphQL 构建应用，包括如何搭建开发环境、如何使用 GraphQL 查询数据、如何使用 React Native 构建 UI 界面等。
搭建开发环境
首先，需要安装 Node.js 和 npm。可以在官网上下载安装包，也可以使用包管理器进行安装。安装完成后，可以在命令行中输入以下命令来检查是否安装成功：
node -v npm -v
接下来，需要安装 React Native CLI 和 Expo CLI。React Native CLI 是一个命令行工具，可以帮助我们创建、运行和打包 React Native 应用。Expo CLI 是一个基于 React Native 的开发工具，提供了一些方便的功能，可以帮助我们更加快速地开发应用。可以使用以下命令来安装：
npm install -g react-native-cli npm install -g expo-cli
安装完成后，可以使用以下命令来创建一个新的 React Native 应用：
react-native init MyApp
这会创建一个名为 MyApp 的新应用。可以使用以下命令进入应用目录并启动应用：
cd MyApp react-native run-ios // 运行 iOS 版本 react-native run-android // 运行 Android 版本
使用 GraphQL 查询数据
在使用 GraphQL 查询数据之前，需要先搭建一个 GraphQL 服务端。可以使用现成的服务端，比如 Apollo Server 或者 Hasura，也可以自己搭建一个服务端。这里以 Apollo Server 为例，介绍如何搭建一个 GraphQL 服务端。
首先，需要安装 Apollo Server：
npm install apollo-server
接下来，在服务端代码中创建一个 Apollo Server 实例，并定义一个 GraphQL 查询：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------ -------
-
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---这个例子中定义了一个名为 hello 的查询，返回一个字符串 Hello world!。可以使用以下命令启动服务端：
node server.js
接下来，在客户端代码中，需要安装 Apollo Client：
npm install @apollo/client
然后，可以使用 Apollo Client 发送一个 GraphQL 查询：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- ------------------------
------ --- ---------------
---
--------------
------ ----
----- -
-----
-
-
-------------- -- --------------------------------这个例子中使用 Apollo Client 发送了一个名为 hello 的查询，返回服务端返回的字符串 Hello world!。
使用 React Native 构建 UI 界面
React Native 提供了一些基础组件，可以帮助我们构建 UI 界面。可以使用以下代码创建一个包含一个文本框和一个按钮的界面：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ---------- ------ - ---- ---------------
------ - --------- --- - ---- -----------------
----- --------- - ----
----- -
-----
-
--
------ ------- -------- ----- -
----- ------ -------- - -------------
----- - -------- ---- - - --------------------
----- ------------- - -- -- -
------------------- -------- ---------------
-
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------- ------- --- ------ ---- ------------ ------- ------------ - --
----------------------
------------
--
------- ------------ --- ----------------------- --
-------- - ----------------------- - --------------------------
-------
--
-这个例子中使用了 useState 和 useQuery 两个 React Hooks，useState 用于管理文本框中的文本，useQuery 用于发送一个名为 hello 的查询，返回服务端返回的字符串并显示在界面上。
总结
本文介绍了如何利用 React Native 和 GraphQL 构建应用，包括搭建开发环境、使用 GraphQL 查询数据、使用 React Native 构建 UI 界面等。希望本文可以对大家学习 React Native 和 GraphQL 有所帮助。完整的示例代码可以在我的 GitHub 上找到：https://github.com/xxx/react-native-graphql-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657dacded2f5e1655d887228