TypeScript + Expo + Apollo 项目教程

TypeScript + Expo + Apollo 项目教程

typescript-expo-apollo-boilerplate[NOT MAINTAINED] Clean boilerplate for TypeScript + Expo (React Native) + React Apollo (GraphQL)项目地址:https://gitcode.com/gh_mirrors/ty/typescript-expo-apollo-boilerplate

本文档将详细介绍如何使用 typescript-expo-apollo-boilerplate 项目，包括项目的目录结构、启动文件和配置文件。

1. 项目的目录结构及介绍

typescript-expo-apollo-boilerplate/
├── assets/
├── src/
├── .eslintrc.json
├── .gitignore
├── App.ts
├── LICENSE
├── README.md
├── app.json
├── babel.config.js
├── package-lock.json
├── package.json
└── tsconfig.json

• assets/: 存放项目资源文件，如图片、字体等。
• src/: 存放源代码文件。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• App.ts: 项目的主入口文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• app.json: Expo 配置文件。
• babel.config.js: Babel 配置文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: npm 包管理文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

App.ts 是项目的启动文件，主要负责初始化应用和设置路由。以下是 App.ts 的基本结构：

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { client } from './src/apollo';
import HomeScreen from './src/screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </ApolloProvider>
  );
};

export default App;

• ApolloProvider: 提供 Apollo Client 实例，用于 GraphQL 请求。
• NavigationContainer: 管理导航状态。
• createStackNavigator: 创建堆栈导航器。
• HomeScreen: 主屏幕组件。

3. 项目的配置文件介绍

app.json

app.json 是 Expo 的配置文件，包含应用的基本信息和配置选项：

{
  "expo": {
    "name": "typescript-expo-apollo-boilerplate",
    "slug": "typescript-expo-apollo-boilerplate",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

babel.config.js

babel.config.js 是 Babel 的配置文件，用于编译 JavaScript 代码：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译选项：

{
  "compilerOptions": {
    "strict": true,
    "target": "esnext",
    "module": "common

typescript-expo-apollo-boilerplate[NOT MAINTAINED] Clean boilerplate for TypeScript + Expo (React Native) + React Apollo (GraphQL)项目地址:https://gitcode.com/gh_mirrors/ty/typescript-expo-apollo-boilerplate