BlogXây dựng thư viện thành phần React Native với Storybook07/07/2021 09:21 50 Table Of Contents
Show Xây dựng thư viện giao diện người dùng thành phần là một cách tuyệt vời để thực thi các tiêu chuẩn thiết kế trong một tổ chức hoặc cơ sở mã. Tuy nhiên, nó có thể đi kèm với rào cản kỹ thuật nghiêm trọng, đặc biệt là trong các thư viện lớn, vì nó có thể dễ dàng kết thúc với một cơ sở mã phức tạp và khó đọc. Rất might, nhiều công cụ khác nhau đã được phát triển để làm cho quá trình xây dựng thư viện thành phần dễ dàng hơn. Trong bài viết này, chúng ta sẽ xem xét một số công cụ giúp xây dựng thư viện thành phần trong React Native dễ dàng hơn, chủ yếu là Storybook và Shopify Restyle. React Native đã giúp việc tạo các ứng dụng di động đa nền tảng và mạnh mẽ bằng React và Javascript trở nên dễ dàng hơn bao giờ hết. Với rất nhiều sự hỗ trợ của cộng đồng, React Native cũng có một hệ sinh thái bổ sung và công cụ lành mạnh giúp các nhà phát triển phần mềm viết các ứng dụng di động có thể mở rộng dễ dàng hơn. Đầu tiên, chúng ta sẽ xem xét Storybook và những gì nó có thể làm cho các nhà phát triển phần mềm, sau đó đi sâu vào việc tạo một thư viện thành phần rất cơ bản trong React Native bằng cách sử dụng Storybook và một thư viện giao diện người dùng tuyệt vời có tên là Shopify Restyle. Ở cuối hướng dẫn này, bạn sẽ tạo và ghi lại các thành phần nút và văn bản. Storyboook là gì?Để hiểu Storybook là gì, trước tiên chúng ta sẽ phải đề cập đến các thư viện thành phần thực sự là gì. Thư viện thành phần là một tập hợp các thành phần giao diện người dùng được tạo sẵn mà toàn bộ tổ chức có thể sử dụng lại trên nhiều dự án hoặc màn hình. Thư viện thành phần tiết kiệm thời gian cho nhóm sản phẩm và giúp dễ dàng kiểm tra đơn vị cũng như xem xét từng phần của một ứng dụng. Storybook là một công cụ mã nguồn mở để xây dựng và ghi lại các thành phần giao diện người dùng một cách riêng biệt. Nó làm cho quá trình tạo và thử nghiệm các thành phần giao diện người dùng trở nên đơn giản hơn. Ví dụ: khi tạo trang đăng nhập, bạn có thể sẽ có một số thành phần cơ bản như nút, đầu vào và văn bản. Mỗi thành phần này có thể được tạo thành một thành phần có thể tái sử dụng mà sau đó bạn sẽ ghi lại bằng Storybook. Các nhóm phần mềm tại các công ty như Google và Atlassian sử dụng Storybook để ghi lại các thư viện thành phần trong toàn bộ tổ chức nhằm tạo cơ sở mã có thể sử dụng lại và có thể chia sẻ. React Native và Shopify RestyleShopify Restyle là một giải pháp tạo kiểu mã nguồn mở cho React Native. Từ tài liệu Restyle:
Với Restyle, thật dễ dàng để xây dựng các thành phần được xây dựng xung quanh một chủ đề trung tâm. Chủ đề này được kết nối với các kiểu thành phần và đạo cụ, cho phép bạn truy cập những thứ như đặt khoảng cách hoặc màu sắc từ các đạo cụ. Ví dụ: để tạo kiểu cho một thành phần nút bằng một màu nhất định, Restyle giúp bạn dễ dàng tạo nút để bạn có thể sử dụng <Button coloration="primary400" /> thay vì nhập thủ công giá trị hex. Cốt lõi của Restyle là theme đối tượng mà bạn xác định để chứa màu sắc, kích thước, khoảng cách và kiểu mặc định của tất cả các thành phần của bạn. Nó cũng cung cấp hai thành phần dựng sẵn Field và Textual content để thực sự dễ dàng xây dựng các thành phần lớn hơn. Thiết lập dự ánHãy đi sâu vào việc thực sự xây dựng thư viện thành phần của chúng ta trong React Native. Chúng tôi sẽ sử dụng Expo trong hướng dẫn này để đơn giản hóa và Typescript để tận dụng khả năng gõ mạnh mẽ mà Restyle cung cấp. Tôi đã tạo một repo có các cam kết tiếp theo trong dự án này, bạn có thể kiểm tra điều đó tại đây. Đầu tiên, hãy khởi tạo một dự án Expo mới trong thư mục hiện tại: npm i -g expo-cli && expo init -t expo-template-blank-typescriptThao tác này sẽ nhắc bạn nhập tên ứng dụng của bạn, sau đó tạo tất cả các tệp và cài đặt các phụ thuộc cơ sở cho ứng dụng mới của chúng tôi. Sau đó, chúng tôi sẽ cài đặt các phụ thuộc của chúng tôi cho Storybook và Restyle: # Setup Storybook for React Native npx -p @storybook/cli sb init --type react_native # Set up storybook loader to autoload tales yarn add -D react-native-storybook-loaderTiếp theo, thêm phần sau vào bundle.json để chạy trình tải truyện: { "scripts": { "prestorybook": "rnstl" } }Cuối cùng, cập nhật điểm vào ứng dụng của bạn (App.tsx) để sử dụng Storybook: // App.tsx import React from 'react'; export { default } from './storybook';Bây giờ, hãy khởi động máy chủ truyện với yarn storybook và khởi động máy chủ nhà phát triển với yarn ios (hoặc là yarn android nếu bạn đang chạy trình giả lập Android. Bạn sẽ thấy màn hình trên. Nếu không, hãy đóng tất cả các quy trình đang chạy, sau đó bắt đầu storybook và máy chủ nhà phát triển một lần nữa. Chúc mừng! Bây giờ bạn có một dự án Expo được thiết lập với Storybook! Hãy xem các tệp của chúng tôi. Nếu bạn nhìn vào thư mục gốc, bạn sẽ thấy một thư mục mới có tên là storybook với một thư mục con được gọi là tales. Đây là nơi mà Storybook và các câu chuyện được định cấu hình. Bạn có thể thấy trong trang internet Storybook ở trên rằng chúng tôi có hai câu chuyện, Button câu chuyện có hai biến thể, with textual content và with some emoji, sau đó Welcome câu chuyện có biến thể to Storybook. Bây giờ chúng ta hãy bắt đầu xây dựng thư viện thành phần của riêng chúng ta bằng cách sử dụng Restyle! Trong phần tiếp theo này, chúng ta sẽ thiết lập chủ đề Restyle, sau đó xây dựng một Button thành phần sử dụng Field và Textual content các thành phần. Định cấu hình RestyleĐầu tiên, hãy cài đặt Restyle: yarn add @shopify/restyle. Tiếp theo, chúng tôi sẽ thiết lập một chủ đề cốt lõi cho ứng dụng của mình. Tạo một tệp mới, src/theme.ts và đặt những thứ sau vào đó: // src/theme.ts import { createTheme } from '@shopify/restyle' const palette = { purpleLight: '#8C6FF7', purplePrimary: '#5A31F4', purpleDark: '#3F22AB', greenLight: '#56DCBA', greenPrimary: '#0ECD9D', greenDark: '#0A906E', black: '#0B0B0B', white: '#F0F2F3', }; const theme = createTheme({ colours: { major: palette.purplePrimary, ...palette }, spacing: { s: 8, m: 16, l: 24, xl: 40, }, breakpoints: { telephone: 0, pill: 768, }, }); export sort Theme = typeof theme; export default theme;Sau đó, bọc ứng dụng của bạn trong nhà cung cấp chủ đề Restyle bằng cách cập nhật App.tsx: // App.tsx import React from 'react'; import {ThemeProvider} from '@shopify/restyle'; import Storybook from './storybook'; import theme from './src/theme'; const App = () => ( <ThemeProvider theme={theme}> <Storybook/> </ThemeProvider> ); export default App;Nếu bạn khởi động lại ứng dụng của mình, có thể bạn sẽ không nhận thấy thay đổi nào, nhưng chúng tôi đã định cấu hình thành công Ứng dụng của mình để sử dụng Restyle! Bây giờ chúng ta hãy tạo Field, Textual contentvà Button các thành phần. Hãy tạo của chúng tôi Parts thư mục sử dụng Bash: mkdir -p ./src/PartsĐầu tiên, hãy tạo Field thành phần trong src/Parts/Field.tsx: // Field.tsx import {createBox} from '@shopify/restyle'; import {Theme} from '../theme'; const Field = createBox<Theme>(); export default Field;Sau đó, của chúng tôi Textual content thành phần trong src/Parts/Textual content.tsx: // Textual content.tsx import {createText} from '@shopify/restyle'; import {Theme} from '../theme'; const Textual content = createText<Theme>(); export default Textual content;Cuối cùng, chúng tôi sẽ tạo Button thành phần trong src/Parts/Button.tsx: // Button.tsx import React from "react"; import { BoxProps, TextProps } from "@shopify/restyle"; import { ActivityIndicator, TouchableHighlight } from "react-native"; import { Theme } from "../theme"; import Field from "./Field"; import Textual content from "./Textual content"; sort ButtonProps = { onPress: () => void; loading?: boolean; textProps?: TextProps<Theme>; } & Partial<BoxProps<Theme>>; const Button: React.FC<ButtonProps> = ({ kids, onPress, loading, textProps, ...props }) => ( <TouchableHighlight underlayColor="clear" onPress={onPress}> <Field py="m" px="xl" backgroundColor="major" borderRadius={8} shadowOffset={{ top: 2, width: 0 }} shadowRadius={5} shadowColor="black" shadowOpacity={0.2} {...props} > {loading ? ( <ActivityIndicator coloration="white" /> ) : ( <Textual content coloration="white" {...textProps}> {kids} </Textual content> )} </Field> </TouchableHighlight> ); export default Button;Bây giờ, hãy chỉ ra một vài điều tuyệt vời mà chúng tôi đang làm với Field và Textual content các thành phần. Lưu ý cách chúng tôi sử dụng các đạo cụ như py và backgroundColor trong của chúng tôi Field thành phần. Chúng tôi đang chuyển các giá trị mà chúng tôi đã xác định trong chủ đề của mình, như m cho khoảng cách hoặc major cho màu nút của chúng tôi, khá tuyệt! Bây giờ chúng tôi đã xây dựng các thành phần này, hãy xuất tất cả các thành phần này trong src/Parts/index.ts: // index.ts export { default as Button } from './Button'; export { default as Textual content } from './Textual content';Bây giờ, hãy cập nhật câu chuyện của chúng tôi để chúng tôi có thể xem những câu chuyện này trong Storybook. Đầu tiên, chúng tôi sẽ xóa storybook/tales/Welcome và storybook/tales/Button để thoát khỏi câu chuyện này, chúng tôi không cần và cập nhật storybook/tales/index.js trở thành *import* './Button.tales';. Tạo nên storybook/tales/Button.tales.js: // Button.tales.js import React from 'react'; import { motion } from '@storybook/addon-actions'; import { textual content } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react-native'; import { Button, Textual content } from '../../src/Parts'; import CenterView from './CenterView'; storiesOf('Button', module) .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>) .add('with textual content', () => ( <Button onPress={motion('clicked-text')}> <Textual content>{textual content('Button textual content', 'Good day Button')}</Textual content> </Button> )) .add('with some emoji', () => ( <Button onPress={motion('clicked-emoji')}> <Textual content> </Textual content> </Button> )) .add('loading', () => ( <Button onPress={motion('loading')} loading> <Textual content>Take a look at</Textual content> </Button> ));Bây giờ, nếu bạn nhìn vào Storybook của chúng tôi, bạn sẽ thấy một số nút khá đẹp! Phần kết luậnBây giờ, bạn có một thư viện thành phần cơ bản được xây dựng với Expo, Storybook và Restyle! Nếu bạn muốn tìm hiểu thêm về Restyle, tôi khuyên bạn nên đọc tài liệu Restyle. Bạn cũng có thể tìm thấy kho mã đã hoàn thành tại đây. LogRocket: Khả năng hiển thị đầy đủ vào các ứng dụng internet của bạnLogRocket là một giải pháp giám sát ứng dụng giao diện người dùng cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của riêng bạn. Thay vì đoán lý do tại sao lỗi xảy ra hoặc yêu cầu người dùng cung cấp ảnh chụp màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại phiên để nhanh chóng hiểu được điều gì đã xảy ra. Nó hoạt động hoàn hảo với mọi ứng dụng, bất kể khuôn khổ và có các plugin để ghi lại ngữ cảnh bổ sung từ Redux, Vuex và @ ngrx / retailer. Ngoài việc ghi nhật ký các hành động và trạng thái của Redux, LogRocket ghi lại nhật ký bảng điều khiển, lỗi JavaScript, dấu vết, yêu cầu / phản hồi mạng với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Nó cũng tạo công cụ cho DOM để ghi lại HTML và CSS trên trang, tạo lại các video pixel hoàn hảo của ngay cả những ứng dụng một trang phức tạp nhất. Dùng thử miễn phí. Chia sẻ
|
