Managing Styles in React Native

React Native là framework cho phép phát triển ứng dụng cho iPhone và Android với javascript.....

Tuy nhiên mình viết bài này vì sau một thời gian đang tự học tự làm app. Đang code thì chuyển sang giai đoạn làm đẹp thì mình mới đang hỏi là cách mình quản lí styles của app đã thích hợp chưa và có cách nào tốt hơn không... Mình xin phep được search và collect lại dưới đây.

StyleSheets are not CSS

StylesSheet giống ( và cũng không giống) CSS, mình nghĩ đa số các dev cũng có một vài lần làm việc với CSS. Ví dụ trong CSS chúng ta có thể viết như sau:

.header {
    padding: 20px;
    margin: 15px 0;
    position: absolute;
}

Trong React-Native, nó không có những khái niệm như pixels, classes , vào lúc hiện tại. Thay vào đó chúng ta viết trong 1 "units", cuối cùng sẽ được chuyển sang điểm ảnh dựa trên độ phân giải của màn hình. Nếu bạn muốn viết giống trong React Native StyleSheet, nó sẽ trông giống như sau:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    import { StyleSheet } from 'react-native';
    header : {
        padding: 20,
        marginTop: 15,
        marginBottom: 15,
        position: 'absolute'
    }
});

Điều quan trọng ở đây chính là absolute được viết như là String và không viết giống như CSS. Điều quan trọng khác là một số tên cú pháp có trong CSS nhưng sẽ không có bên React Native. Việc định nghĩa format Styles trong React Native là rất rõ ràng. Khi chúng ta viết JavaScript, chúng ta không được phép viết đoạn mã như sau margin: 15 0 đây như là 1 đoạn mã không hợp lệ. Thay vào đó chúng ta sử dụng các case mô tả rõ ràng cho từng thuộc tính hơn như là margin Top và marginBottom.

StyleSheets được import vào trong các components và được sử dụng bởi việc gọi với thuộc tính style tại component. Chúng ta sẽ xem tại ví dụ ngay sau dưới.

Với việc hiểu StyleSheets !== CSS, chúng ta sẽ nói về viêc cấu trúc hay viết StyleSheets với format nào là tốt nhất cho ứng dụng của chúng ta.

Reuse Components, Not Styles Khi xây dựng web, chúng ta có rất nhiều cách tổ chức CSS bằng việc sử dụng các tool Sass, Less, PortCSS.. Nó cho phép chúng ta hệ thống code có nhiều cấp và cuối cùng sẽ dùng tool để nhóm các CSS lại với nhau tạo thành một "liên kết" stylesheet cho toàn bộ ứng dụng.

Trong React Natice, bạn phải suy nghĩ hơi khác về quản lí code stylesheet. Thay vì viết một StyleSheet lớn, chúng ta vẫn muốn tiếp tục viết và chia nhỏ styles. Điều đó có nghĩa là bất kỳ thứ gì, đều có thể tái sử dụng thì nene viết thành các component. Xem ví dụ bên dưới:

Trong ứng dụng web, chúng ta có thể viết class cho style button như sau:

.button {
    background-color: #111;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
}

Trong React-native, không có cách nào tốt để chia sẻ styles mà không viết chung trong một file StyleSheet lớn ( cách này ko tốt) và chúng ta sẽ chia nhỏ styles và đẩy chúng vào trong component, gọi là Button component.

Để bắt đầu, chúng ta cần tạo 2 files mới, components/Button/index.js và components/Button/styles.js Chúng sẽ như thế này:

# components/Button/index.js

import React from 'react';
import {
    TouchableHightlight,
    Text
} from 'react-native';
import styles from './styles'

const Button = () => (
    <TouchableHighlight style={style.container}>
        <Text style={style.button}>Click me </Text>
    </TouchableHightligth>
)

export default Button;

# components/Button/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        borderRadius: 5
    },
   button: {
       backgroundColor: '#111',
       color: '#fff',
       borderRadius: 5,
       padding: 15
   }
});

Bây giờ, bất cứ khi nào chúng ta muốn add button vào ứng dụng, chúng ta chỉ cần import the Button component vào, nó sẽ có đầy đủ các styles cần thiết.

Tiếp theo sẽ nói về container: button ở trên.

Black Boxes

TouchableHighLight là một component trong ReactNative, nó cho phép người dùng tap vào chúng và chúng ta có bắt được sự kiện này để xử lý action. Nếu ko có component này thì khi user tap vào "button" của bạn, sẽ không nhận được hồi đáp gì.

TouchableHighLight có một vài quirks đặc biệt về transparency. Nếu không thêm "borderRadius: 5 " vào thì khi bạn ấn vào button, nó sẽ xuất hiện 1 background đen rất xấu trên UI. Bạn muốn đảm bảo rằng bất kì khi nào bạn có component "TouchableHighlight", bạn cần xem xét transparent và not-transparent cho mọi yếu tố bên trong component. Để thoát khỏi "hộp đen" xung quanh vấn đề các button khi được tap vào thì các component con trong đấy có cần được nhìn thấy chúng ta set "borderRadius: 5" cho TouchableHightLight

Define Common Styles

Có thể trong app của bạn không có quá nhiều styles khác nhau cho color, fontsize, padding.v.v Để những styles này được dùng lại trong nhiều components, có một ý hay đấy là viết một common stylesheet, nó có thể được import ở trong các stylesheet khác.

Ví dụ về common stylesheets như sau:

# styles/common.js

export const COLOR_PRIMARY = '#58C9B9';
export const COLOR_SECONDARY = '#111';
export const  FONT_NORMAL = 'OpenSans-Regular';
export const FONT_BOLD = 'OpenSans-Bold';
export const BORDER_RADIUS = 5;

Và chúng ta viết stylesheet cho Button và sử dụng common styles

# components/Button/styles.js

import { StyleSheet } from 'react-native';
import { COLOR_PRIMARY,BORDER_RADIUS } from './../styles/common';

export default StyleSheet.create ({
    container: {
        borderRadius: BORDER_RADIUS
    },
    button: {
        backgroundColor: COLOR_PRIMARY,
        borderRadius: BORDER_RADIUS
    }
});

Tổng kết

React Native là cách nhanh và dễ để xây dựng ứng dụng native cho iPhone và Android Với việc tổ chức là lên kế hoạch trước khi bạn bắt đầu coding các components sẽ giúp bạn giảm rất nhiều thời gian trong việc code trùng lặp. Common StyleSheet khá hữn ích, và đặc biệt là khi khách hàng muốn thay đổi font, color của ứng dụng.