利用 React Native 和 GraphQL 构建应用-JavaScript中文网-JavaScript教程资源分享门户

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 查询：

// javascriptcn.com 代码示例
const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello world!"
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

这个例子中定义了一个名为 hello 的查询，返回一个字符串 Hello world!。可以使用以下命令启动服务端：

node server.js

接下来，在客户端代码中，需要安装 Apollo Client：

npm install @apollo/client

然后，可以使用 Apollo Client 发送一个 GraphQL 查询：

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache()
});

client.query({
  query: gql`
    query {
      hello
    }
  `
}).then(result => console.log(result.data.hello));

这个例子中使用 Apollo Client 发送了一个名为 hello 的查询，返回服务端返回的字符串 Hello world!。

使用 React Native 构建 UI 界面

React Native 提供了一些基础组件，可以帮助我们构建 UI 界面。可以使用以下代码创建一个包含一个文本框和一个按钮的界面：

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useQuery, gql } from '@apollo/client';

const GET_HELLO = gql`
  query {
    hello
  }
`;

export default function App() {
  const [text, setText] = useState('');
  const { loading, data } = useQuery(GET_HELLO);

  const onButtonPress = () => {
    console.log(`Button pressed, text=${text}`);
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TextInput style={{ height: 40, width: 200, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={setText}
        value={text}
      />
      <Button title="Press me" onPress={onButtonPress} />
      {loading ? <Text>Loading...</Text> : <Text>{data.hello}</Text>}
    </View>
  );
}

这个例子中使用了 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