Áp dụng và tổ chức các styles trong React Native (phần 3)

Áp dụng các styles vào các ứng dụng (tiếp tục)

Khi sử dụng một tên style như warning, nó là dễ để nhận ra ý định của thông điệp. Nhưng style nội dòng color: ‘red’
không cung cấp cái nhìn bên trong nào vào tại sao thông điệp là đỏ. Có các styles chỉ ra tại một nơi hơn là nội dòng
trên nhiều bộ phận làm nó dễ dàng hơn để áp dụng các thay đổi qua toàn bộ ứng dụng. Tưởng tượng bạn đã muốn thay đổi
thông điệp warning thành màu vàng. Tất cả việc bạn phải làm là thay đổi định nghĩa style một lần trong stylesheet,
color: ‘yellow’.
Đoạn code trên cũng thể hiện làm cách nào chỉ ra nhiều styles bằng cách cung cấp một mảng các đặc tính style. Nhớ
là khi làm cái này rằng style cuối cùng truyền vào sẽ ghi đè style trước nếu có một đặc tính trùng. Ví dụ, nếu một
mảng các styles như cái này được cung cấp, giá trị cuối cho color sẽ ghi đè tất cả các giá trị trước:

style={[{color: ‘black’},{color: ‘yellow’},{color: ‘red’}]}

Trong ví dụ này, color sẽ là red.
Nó cũng là có thể để kết hợp 2 phương pháp luận bằng cách chỉ ra một mảng các đặc tính styling sử dụng các styles
nội dòng và tham chiếu tới các stylesheets:

style={[{color: ‘black’}, styles.message]}

React Native là rất linh động trong khía cạnh này, nó có thể là cả tốt và xấu. Chỉ ra các styles nội dòng khi bạn
nhanh chóng thử prototype thứ gì đó là cực dễ, nhưng trong long haul, bạn sẽ muốn cẩn thận làm cách nào bạn tổ chức
các styles của bạn; mặt khác ứng dụng của bạn có thể nhanh chóng trở nên một rối rắm và khó quản lí. Bằng cách tổ
chức các styles của bạn, bạn sẽ làm nó dễ dàng hơn làm việc sau:
+ Duy trì cơ sở code ứng dụng của bạn
+ Sử dụng lại các styles qua các bộ phận
+ Trải nghiệm với các thay đổi style suốt quá trình phát triển.

Chia sẻ