在Artsy/Eigen项目中添加新组件的完整指南

在Artsy/Eigen项目中添加新组件的完整指南

eigen The Art World in Your Pocket or Your Trendy Tech Company's Tote, Artsy's mobile app. 项目地址: https://gitcode.com/gh_mirrors/ei/eigen

前言

在移动应用开发中，组件化是提高代码复用性和维护性的重要手段。本文将详细介绍如何在Artsy/Eigen项目中添加新的React Native组件，包括基础组件和完整屏幕的创建流程。

创建基础组件

组件文件结构

在项目中，组件通常存放在src/app/Components目录下。建议为每个新组件创建专门的子目录，保持代码组织清晰。

组件代码示例

以下是一个典型的新组件模板：

import { Text } from "@artsy/palette-mobile"

interface OurProps {
  whatever: string
}

export const MyNewComponent: React.FC<OurProps> = (props) => {
  const someFunStuff = useACoolHook()
  return <Text variant="lg-display">Hello world!</Text>
}

关键点说明：

1. 使用TypeScript定义组件props接口
2. 采用函数式组件写法
3. 使用项目内部的@artsy/palette-mobile提供的Text组件
4. 可以结合自定义hook使用

创建新屏幕（可选）

如果需要将组件作为独立屏幕使用，需要完成以下配置步骤：

1. 注册组件

在AppRegistry.tsx文件中添加组件引用：

import MyNewComponent from "./Components/Path/To/MyNewComponent"

然后在modules对象中添加条目：

  FullFeaturedArtistList: { Component: CollectionFullFeaturedArtistListQueryRenderer },
  Gene: { Component: Gene },
+ MyNewComponent: {Component: MyNewComponent},
  Home: { Component: HomeQueryRenderer, isRootViewForTabName: "home" },
  Inbox: { Component: Inbox, isRootViewForTabName: "inbox" },

2. 添加路由配置

在routes.tsx文件中定义路由规则：

  addRoute("/fair/:fairID/info", "FairMoreInfo"),
+ addRoute("/my-new-component", "MyNewComponent"),
  addRoute("/city/:citySlug/:section", "CitySectionList"),
  addRoute("/city-fair/:citySlug", "CityFairList"),

路由参数传递机制

路由系统会自动处理两种参数：

1. 路径参数：使用/path/:paramName语法定义，如/city-fair/:citySlug
2. 查询参数：URL中的?key=value形式

例如对于路由/city-fair/london?show_controls=false，组件将接收如下props：

<CityFairList citySlug="london" show_controls="false" />

最佳实践建议

1. 命名规范：组件名称使用PascalCase，文件名与组件名保持一致
2. 类型安全：始终为组件props定义TypeScript接口
3. 目录结构：相关组件放在同一目录下，复杂组件可拆分多个子组件
4. 样式管理：遵循项目现有的样式系统规范
5. 测试覆盖：为新组件添加必要的单元测试

调试技巧

添加新组件后，可以通过以下方式验证：

1. 直接渲染组件进行单元测试
2. 通过定义的路由访问屏幕
3. 检查控制台日志和React Native调试工具
4. 验证参数传递是否正确

总结

在Artsy/Eigen项目中添加新组件是一个结构化的过程，需要创建组件文件、注册组件以及配置路由（如果需要）。理解项目的架构设计和遵循既定的开发规范，可以确保新组件与现有系统无缝集成。本文提供的步骤和最佳实践将帮助开发者高效地扩展应用功能。

eigen The Art World in Your Pocket or Your Trendy Tech Company's Tote, Artsy's mobile app. 项目地址: https://gitcode.com/gh_mirrors/ei/eigen