Granite项目快速入门指南：10分钟构建企业级React Native微服务应用

前言

Granite是一个面向企业级应用的React Native微服务框架，它通过模块化架构和高效的开发流程，让开发者能够快速构建可扩展的移动应用。本文将带你从零开始，在10分钟内完成第一个Granite应用的创建和运行。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

1. Node.js环境：推荐使用LTS版本（22.12.0或更高）
2. 移动开发工具：
   • macOS用户：安装最新版Xcode
   • Windows/Linux用户：配置Android Studio和模拟器
3. 测试应用：在模拟器上安装Granite测试应用

专业提示：建议使用nvm或fnm等Node版本管理工具，确保Node版本的一致性

第一步：创建Granite项目

Granite提供了便捷的项目创建工具，支持多种包管理器：

# 使用npm
npx create-granite-app@latest

# 或使用yarn
yarn create granite-app

# 或使用pnpm
pnpm create granite-app

创建过程中，CLI会交互式地询问项目配置选项，包括：

• 项目名称和路径
• 开发工具选择（如ESLint、Prettier等代码规范工具）
• 其他可选配置

创建完成后，你会看到类似如下的项目结构：

my-granite-app/
├── pages/          # 微服务页面目录
├── src/            # 核心源代码
├── granite.config.ts      # Granite配置文件
└── react-native.config.js # RN配置

第二步：安装依赖

进入项目目录并安装依赖：

cd my-granite-app
npm install  # 或使用yarn/pnpm等效命令

项目结构解析

理解Granite的项目结构对于后续开发至关重要：

1. pages目录：采用文件系统路由，每个.tsx文件自动成为一个可访问的页面
2. src/_app.tsx：应用入口文件，可在此添加全局逻辑
3. granite.config.ts：核心配置文件，可定义：
   • 微服务行为
   • 构建配置
   • 环境变量
4. 自动生成文件：如router.gen.ts提供类型安全的路由功能

启动开发服务器

运行开发命令：

npm run dev

成功启动后，终端会显示Granite的ASCII艺术logo和开发命令提示：

 ██████╗ ██████╗  █████╗ ███╗   ██╗██╗████████╗███████╗
██╔════╝ ██╔══██╗██╔══██╗████╗  ██║██║╚══██╔══╝██╔════╝
...

测试你的应用

1. 在模拟器中打开Granite测试应用
2. 应用会自动连接到本地开发服务器
3. 你将看到默认的欢迎页面

调试技巧：在模拟器中按"d"键可打开开发者菜单，按"r"键可重新加载应用

创建你的第一个页面

让我们添加一个简单的个人资料页面：

1. 在pages目录下创建profile.tsx文件
2. 使用React Native基础组件构建UI
3. 通过useRouter钩子实现页面导航

示例代码：

// pages/profile.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>这是我的个人资料页面</Text>
    </View>
  );
}

然后在首页添加导航按钮：

// pages/index.tsx
import { useRouter } from '@granite/router';

function HomeScreen() {
  const router = useRouter();
  
  return (
    <View>
      <Button 
        title="查看个人资料"
        onPress={() => router.push('/profile')}
      />
    </View>
  );
}

构建生产版本

当开发完成后，可以构建生产版本：

npm run build

构建完成后，会在dist目录生成优化后的微服务包，通常每个包的大小控制在300KB以内，确保高效的网络传输。

进阶学习建议

完成基础应用创建后，你可以进一步探索：

1. 状态管理：集成Redux或MobX等状态管理库
2. API集成：连接后端微服务
3. 性能优化：使用Granite提供的性能分析工具
4. 原生模块：扩展原生功能

常见问题排查

1. 连接问题：确保模拟器和开发服务器在同一网络
2. 热重载失效：检查metro配置是否正确
3. 类型错误：确认TypeScript配置和类型定义

通过本指南，你已经掌握了Granite应用开发的基础流程。接下来，你可以继续探索Granite更高级的功能和最佳实践，构建更复杂的企业级应用。