Phản ứng bản định kiểu phổ biến gốc

Các dự án React Native rất linh hoạt trong cách chúng có thể được tổ chức và cấu trúc, đặc biệt là khi triển khai theo phong cách. Chúng tôi tìm thấy rất nhiều biến thể giữa các ứng dụng mà chúng tôi làm việc về cách chúng thiết lập và sắp xếp các kiểu. Điều này dẫn đến phát sinh thêm chi phí khi phát triển các tính năng mới cho các dự án mới và đôi khi các dự án rơi vào một số mẫu nhất định khiến việc lặp lại thiết kế trở nên cồng kềnh

Chúng tôi đã học được một vài chiến lược đơn giản giúp chúng tôi có trải nghiệm thú vị hơn khi làm việc với các dự án React Native. Dưới đây là một số khái niệm để áp dụng các kiểu nhằm tối đa hóa công thái học và khả năng đọc. Những điều này cho phép chúng tôi phát triển và lặp lại các thiết kế một cách nhanh chóng, dễ dàng và nhất quán hơn

Nếu bạn muốn tìm hiểu bằng cách xem trực tiếp một số mã, thì chúng tôi đã tập hợp một ứng dụng mẫu tối thiểu để thể hiện các khái niệm này. bạn có thể tìm thấy nó ở đây. RNStylingTemplate

Giữ các kiểu trong thư mục nguồn gốc

Kiểu dáng là mối quan tâm hàng đầu và do đó, kiểu dáng phải có thể truy cập được từ thư mục cấp cao nhất trong mã ứng dụng

MyReactNativeApp
  - src
    - assets
    - compontents
      - MyComponent.js
    - styles
      - colors.js
      - index.js
      - typography.js
      - ...
  ...

Chúng tôi tham khảo các kiểu trong hầu hết mọi thành phần và làm cho chúng dễ truy cập nhất có thể sẽ dẫn đến mã sạch hơn

Một cách khác để suy nghĩ về nó là chúng ta muốn giảm thiểu việc sử dụng ____1_______3trong các đường dẫn tương đối của chúng ta. Điều này không chỉ làm giảm số lượng chi phí tinh thần trong việc đếm các thư mục lồng nhau mà còn cho phép tái cấu trúc dễ dàng hơn và dễ hiểu hơn khi dự án phát triển

import { MyStyles } from "../styles"

là dễ dàng hơn để làm việc với hơn

import { MyStyles } from "../../../../common/utils/styles/my_styles"

Xây dựng các kiểu phức tạp từ các kiểu đơn giản hơn

Bằng cách sử dụng tính năng hủy đối tượng trong khai báo kiểu, chúng tôi có được các kiểu thực sự ngắn gọn và dễ đọc, cho phép chúng tôi khai báo trong các thành phần của mình

// buttons.js

export const small = {
  paddingHorizontal: 10,
  paddingVertical: 12,
  width: 75
};

export const rounded = {
  borderRadius: 50
};

export const smallRounded = {
  ...base,
  ...small,
  ...rounded
};

// src/MyComponent/index.js

const styles = StyleSheet.create({
  button: {
    ...Buttons.smallRounded,
  },
})

dễ hiểu mục đích và duy trì hơn là

// src/MyComponent/index.js

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 10,
    paddingVertical: 12,
    width: 75,
    borderRadius: 50
  },
})

Nhóm các biến tương tự trong các mô-đun và gộp chúng lại trong một tệp

import { MyStyles } from "../styles"

Các biến kiểu sẽ dễ tìm và hiểu hơn khi chúng được sắp xếp theo chức năng. Do đó, họ nên sống trong các tập tin có mục đích

Nếu chúng tôi đặt một

import { MyStyles } from "../styles"

- styles
  - colors.js
  - index.js
  - spacing.js
  - typography.js
  - buttons.js

// src/styles/index.js

import * as Buttons from './buttons'
import * as Colors from './colors'
import * as Spacing from './spacing'
import * as Typography from './typography'

export { Typography, Spacing, Colors, Buttons }

Điều này cho phép chúng tôi

• chỉ nhập những gì chúng ta cần
• nhập từ cùng một tệp mỗi lần
• cung cấp cho các biến tên mô tả và tên ngắn, chứa trong một đối tượng mô tả
• dễ dàng mở rộng và sửa đổi các kiểu phổ biến
• viết mã ngắn gọn và biểu cảm hơn

// src/MyComponent/index.js

import { Typography, Colors, Spacing } from '../styles'

...

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.background,
    alignItems: 'center',
    padding: Spacing.base,
  },
  header: {
    flex: 1,
    ...Typography.mainHeader,
  },
  section: {
    flex: 3,
    ...Typography.section,
  }
})

tốt hơn

// src/MyComponent/index.js

import {
  largePadding,
  smallest,
  small,
  large,
  base,
} from '../../../common/utils/styles/spacing'
import {
  largeRadius,
  baseTextColor,
  headerFontSize,
  smallFontSize,
} from '../../../common/utils/styles/common'
import { background, shuttleGray } from '../../../common/utils/styles/colors'

...

const styles = StyleSheet.create({
  container: {
    backgroundColor: background,
    padding: largePadding,
  },
  header: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#b7bdc5',
    flexDirection: 'row',
    justifyContent: 'center',
    borderRadius: largeRadius,
    color: shuttleGray,
    fontSize: headerFontSize,
    paddingBottom: base,
  },
  section: {
    flex: 3,
    alignItems: 'center',
    backgroundColor: background,
    flexDirection: 'row',
    justifyContent: 'center',
    borderRadius: largeRadius,
    color: baseTextColor,
    fontSize: smallFontSize,
    lineHeight: 19,
  }
})

Tính đồng nhất và nhất quán của việc luôn lấy các phong cách từ cùng một nơi giúp tiết kiệm đáng kể thời gian phát triển trong suốt vòng đời của một dự án

Giữ

import { MyStyles } from "../styles"

Xác định

import { MyStyles } from "../styles"

• các kiểu cho một thành phần sẽ không bị ghi đè cho một thành phần khác trong lần lặp lại trong tương lai
• các kiểu sẽ được duy trì khi thành phần phát triển
• các thành phần có thể linh hoạt trong quá trình lặp lại thiết kế
• có một lượng chi phí tinh thần tối thiểu trong khi triển khai các thiết kế cho các thành phần vì có một nơi để tìm kiếm các kiểu chứ không phải nhiều nơi

Một lý do khiến bạn có thể không muốn sử dụng biểu định kiểu nội tuyến là để giảm lượng trùng lặp trong mã, nhưng hiện tại bạn đang tạo các biến cho kiểu toàn cục trong các tệp có tên chức năng, bạn vẫn có thể lưu ý thực hành D. R. Y. Mã hóa (Don't Repeat Yourself) mà không sử dụng lại bản định kiểu

import { MyStyles } from "../styles"

khép kín hơn

import { MyStyles } from "../styles"

Sự đơn giản của việc chỉ cần cập nhật một tệp để cập nhật một thay đổi về phong cách cho một thành phần sẽ nhanh hơn và dẫn đến ít lỗi hơn

Những gì chúng tôi đã trình bày ở đây hoạt động tốt như một điểm khởi đầu cho chúng tôi và khách hàng của chúng tôi, nhưng JavaScript và React Native là những hệ sinh thái lớn và phát triển nhanh chóng. Không có giải pháp chung cho tất cả các dự án, vì vậy số dặm của bạn có thể thay đổi

Các dự án cực lớn với hàng trăm thành phần hoặc dự án có nhu cầu kinh doanh rất cụ thể có thể được hưởng lợi từ các mẫu khác nhau. Ví dụ: các thành phần theo chủ đề và biểu định kiểu không nội tuyến là các mẫu khác có thể hoạt động tốt hơn cho tình huống cụ thể của bạn

Mọi thứ đều là sự đánh đổi và ở đây chúng tôi đang tối ưu hóa tốc độ và sự rõ ràng của việc triển khai thiết kế

Cuối cùng, bạn sẽ cần lặp đi lặp lại và tìm những gì phù hợp với dự án và nhóm cụ thể của mình

1. Phong cách là quan trọng. làm cho chúng dễ dàng tìm thấy. Giữ các kiểu trong thư mục ứng dụng gốc
2. Nhận nguyên tử. Xây dựng các Style phức tạp từ các Style đơn giản hơn
3. Phong cách là quan trọng. làm cho chúng dễ sử dụng. Gói các kiểu giống nhau và hiển thị thông qua một chỉ mục. tập tin js
4. Giữ Styles đóng. Giữ kiểu nội tuyến với các thành phần

Tất cả cùng nhau, một ứng dụng của các kiểu cho một thành phần có thể trông như thế này

import { MyStyles } from "../styles"

Bằng cách tuân theo các quy ước trên, chúng ta có thể giữ cho các kiểu trong các dự án React Native của mình sạch hơn, gọn gàng hơn và ý nghĩa hơn. Điều này cho phép chúng tôi lặp lại nhanh hơn, có trải nghiệm phát triển thú vị hơn và cuối cùng tạo ra các sản phẩm tốt hơn

Một lần nữa, đây là một ứng dụng mẫu đơn giản để giúp chứng minh các phương pháp này để triển khai các kiểu trong ứng dụng React Native. RNStylingTemplate

CSS nào được sử dụng cho React Native?

Phong cách React Native có giống với CSS không?

Bạn có thể sử dụng CSS thông thường với phản ứng không?

Phương pháp nào được sử dụng để tạo StyleSheet trong React Native?