1. 10:50 10/10/2026
## Xây dựng hệ thống thiết kế component có thể tái sử dụng giữa React Web và React Native
Khi làm việc với cả React Web và React Native, việc duy trì sự thống nhất trong giao diện người dùng có thể là một thách thức. Tuy nhiên, bằng cách tạo một hệ thống thiết kế component được chia sẻ, bạn có thể viết mã một lần và triển khai nó trên cả hai nền tảng. Dưới đây là hướng dẫn thực tế để xây dựng một hệ thống component linh hoạt, dễ bảo trì và có thể mở rộng.
### 1. Xác định các nguyên tắc cơ bản của thiết kế hệ thống
Trước tiên, hãy xác định các yếu tố cốt lõi cần thiết cho giao diện người dùng (Button, Input, Card, v.v.). Tạo một bảng thiết kế ghi lại kích thước, khoảng cách, trọng lượng phông chữ và màu sắc. Sử dụng hệ thống thiết kế này làm cơ sở cho mọi component.
### 2. Tạo các types chung
Tạo một thư mục `shared/types` để định nghĩa các kiểu dữ liệu phổ biến (kích thước phông chữ, màu sắc, khoảng cách). Ví dụ:
```ts
// shared/types/theme.ts
export type Spacing = 0 | 4 | 8 | 12 | 16 | 24 | 32;
export type FontSize = 'small' | 'medium' | 'large';
export interface Theme {
colors: { primary: string; background: string; };
spacing: Record<Spacing, string>;
fontSizes: Record<FontSize, string>;
}
```
### 3. Xây dựng một component cơ bản có thể tương thích với cả hai nền tảng
Bắt đầu với một component đơn giản như `Button`. Sử dụng các thư viện tương thích như `styled-components` với plugin `styled-components-native` hoặc sử dụng các thư viện UI dựa trên React Native (ví dụ: React Native Paper) cùng một bộ style tương tự.
```ts
// components/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { Theme } from '../shared/types/theme';
const styles = StyleSheet.create({
base: { padding: 12, borderRadius: 8 } as ViewStyle,
text: { fontSize: 16, color: '#fff' } as TextStyle,
});
export const Button: React.FC<{ title: string; onPress: () => void; theme: Theme }> = (
{ title, onPress, theme }
) => (
<TouchableOpacity style={[styles.base, { backgroundColor: theme.colors.primary }]} onPress={onPress}>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
```
### 4. Tích hợp Storybook để kiểm tra component trên cả hai nền tảng
Tạo các story trong Storybook cho phiên bản web (`.web.tsx`) và phiên bản native (`.native.tsx`). Điều này giúp bạn xem trước giao diện của component trên cả hai nền tảng mà không cần chạy ứng dụng.
### 5. Tự động hóa quy trình build
Sử dụng một script build (ví dụ: Webpack cho web, Metro cho React Native) để biên dịch các component đã được tạo sẵn. Điều này giúp bạn đảm bảo rằng các thay đổi trong thiết kế hệ thống sẽ được áp dụng trên cả hai nền tảng.
### 6. Thực hiện kiểm thử và kiểm tra truy cập
Tạo các bài kiểm tra unit cho logic (ví dụ: xử lý sự kiện). Sử dụng các công cụ kiểm tra truy cập như `axe` cho phiên bản web và `react-native-accessibility` cho phiên bản native.
### 7. Triển khai và theo dõi
Sau khi component được triển khai, hãy theo dõi phản hồi từ người dùng. Điều chỉnh các kiểu chung khi cần thiết để duy trì sự nhất quán.
#### Lời khuyên thực tế
- **Sử dụng TypeScript**: Điều này giúp đảm bảo tính nhất quán trong các props giữa các nền tảng.
- **Tận dụng các hook**: Tạo các hook tùy chỉnh (ví dụ: `useTheme`) để chia sẻ logic.
- **Tạo tài liệu**: Sử dụng Storybook cùng với các ghi chú trên README để ghi lại các props và trạng thái của component.
Bằng cách tuân thủ các bước trên, bạn có thể xây dựng một hệ thống thiết kế component mạnh mẽ, giúp rút ngắn thời gian phát triển và đảm bảo trải nghiệm người dùng thống nhất trên cả React Web và React Native.