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

2025-06-01 00:44:43作者：凤尚柏Louis

前言

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

环境准备

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

Node.js环境：推荐使用LTS版本（22.12.0或更高）
移动开发工具：
- macOS用户：安装最新版Xcode
- Windows/Linux用户：配置Android Studio和模拟器
测试应用：在模拟器上安装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的项目结构对于后续开发至关重要：

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

启动开发服务器

运行开发命令：

npm run dev

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

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

测试你的应用

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

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

创建你的第一个页面

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

在pages目录下创建profile.tsx文件
使用React Native基础组件构建UI
通过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>
  );
}